css如何绘制特殊图形的方法示例

一、三角形

border边框设置

代码：

width: 300px;
height: 300px;
background: red;
border: 40px solid black;
border-left-color: blue;
border-bottom-color: yellow;
border-right-color: pink;
border-top-color: #008800;

花特殊图形的时候需要将宽高设置成0

效果：

代码：

width: 0;
height: 0;
background: transparent;
border: 40px solid black;
border-left-color: blue;
border-bottom-color: yellow;
border-right-color: pink;
border-top-color: #008800;

1、等腰三角形：将其他的边的border设置成透明

代码：

width:0;
height: 0;
background: transparent;
border: 40px solid black;
border-left-color: transparent;
border-bottom-color: yellow;
border-right-color: transparent;
border-top-color: transparent;

2、直角三角形

代码：先写出个完整的div,再使用border-***-width：0；来截取三角形

border-top-width/border-bottom-width:0=》就是在中间横着劈开一道，保留上边或者下边

border-left-width/border-right-width:0=》就是在中间竖着劈开一道，保留左边或者右边

.rightAngle{
    width: 0;
    height: 0;
    background: transparent;
    border: 40px solid black;
    border-left-color: blue;
    border-bottom-color: yellow;
    border-right-color: pink;
    border-top-color: #008800;
    border-top-width: 0;
    border-left-width: 0;
    border-right-color: transparent;
}

3、梯形

彩带图形：

代码：

width: 300px;
height: 0;
background: transparent;
border: 40px solid #008800;
border-left-color: transparent;
border-bottom-color: yellow;
border-right-color: transparent;
border-top-color: #008800;

梯形：

代码：将上面彩带图形的宽度减少，然后将上面的梯形设置为透明

width: 100px;
height: 0;
background: transparent;
border: 40px solid #008800;
border-left-color: transparent;
border-bottom-color: #008800;
border-right-color: transparent;
border-top-color: transparent;

总结：通过设置长度和高度，以及设置border的透明度来拼凑成想要的图形 4、圆形

4、图形：

代码： 使用border-radius:50%;

.circle{
    width: 100px;
    height: 100px;
    border: 0;
    border-radius: 50%;
    background-color: orange;
}

5、椭圆

图形：

代码：

.ellipse{
    width: 200px;
    height: 120px;
    background-color: orange;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
}

总结：

一个display：block的元素设定宽高之后表现为矩形。通过设定border-radius可以得到圆角矩形，圆形和椭圆形。

在使用border-radius时，有几点可能需要注意一下：

• border-radius，可以分别对4个角进行设定。 例如上图：border-top-left-radius: apx bpx;
• border-xxx-xxx-radius的两个值分别代表着椭圆长轴和短轴长度的一半，通常简写的时候例如border-top-left-radius: 10px;(border-top-left-radius:10px 10px;) 表明长轴和短轴的长度均为20px，也就是半径为10px的圆形（圆角部分）。
• 当使用百分比数值时，a 相对于width， b相对于height 6、特殊图形

（1）斜边三角形

图形：

代码：先画个等边三角形，然后再转换角度

.beveledTriangle{
    margin: 50px;
    width: 0;
    height: 0;
    border: 20px solid #2b81af;
    border-top-width: 40px;
    border-top-color:transparent;
    border-bottom-width: 40px;
    border-bottom-color: transparent;
    border-left-width: 0;
    border-right-color: #008800;
    border-right-width: 25px;
    transform-origin:center center;
    transform:rotateY(-180deg) rotate(-44deg)  ;
}

（2）绘制一条“小尾巴”

图形：

代码：

.tail{
    margin: 50px;
    width: 100px;
    height: 70px;
    border-top-right-radius: 70px 70px;
    border-right:6px solid #000000;
}

总结：当对一个角应用圆角样式， 如果这个角相邻的两个boeder一个有定义而一个无定义 ，那么绘制的结果就是有粗到细的“小尾巴了”

7、绘制QQ图案（取自AlloyTeam案例）

图形：

代码：

    
 
     
     
 
 
     
  
     
 
 
     
 
 
     
 
 
     
  
  
  
  
     
 
    
    
 
     
     
 
 
     
     
 
 
     
     
     
     
 
 
     
     
 
    
    
 
     
     
 
 
     
     
 
 
     
     
 
 
     
     
 
    
    
 
     

     
 
 
     
     
 
 
 
     
     
 
 
     
     
 
 
    



    body{
 margin: 0;
 padding:0;
 font: 12px Tahoma, arial, sans-serif;
    }
    #mask {
 position: absolute;
 opacity: 0.2;
 top:0;
 left:0;
    }

    header{
 font-family: 'Segoe UI Light','Segoe UI','Microsoft Jhenghei','寰蒋闆呴粦',sans-serif;
 color: #666;
 font-size: 50px;
 text-align: center;
 margin-top:50px;
    }

    .team {
 font-size: 0.6em;
    }

    .team a{
 color:#5FB7E9;
 text-decoration: none;
    }

    .team a:hover{
 color:#4B9BC9;
    }
    

    #qq {
 width: 420px;
 height: 400px;
 margin: 0 auto;
 margin-top: 30px;
 position: relative;
 display:block;
    }

    .head{
 position: absolute;
 top:18px;
 left: 96px;
 width: 234px;
 height: 185px;
 border: 1px solid #000;
 border-top-left-radius: 117px 117px;
 border-top-right-radius: 117px 117px;
 border-bottom-left-radius: 117px 68px;
 border-bottom-right-radius: 117px 68px;
 z-index:10;
 background: #000;
    }

    .eye{
 width: 44px;
 height: 66px;
 border:1px solid #000;
 border-radius: 50% 50%;
 position: absolute;
 background: #fff;
    }

    .left.eye{
 left:62px;
 top:50px;
    }

    .right.eye{
 left:123px;
 top:50px;
    }

    .innerLeftEye{
 position: absolute;
 top: 20px;
 left: 20px;
 width: 18px;
 height: 24px;
 border-radius: 50%;
 border: 1px solid #000;
 background: #000;
    }

    .innerLeftEye:after{
 content: "";
 position: absolute;
 width: 6px;
 height: 8px;
 background: white;
 z-index: 11;
 top: 6px;
 left: 9px;
 border-radius: 50%;
    }

    .innerRightEye{
 position: absolute;
 width: 18px;
 height: 20px;
 top: 20px;
 left: 8px;
 border-top-left-radius: 50% 90%;
 border-top-right-radius: 50% 90%;
 border-bottom-left-radius: 50% 10%;
 border-bottom-right-radius: 50% 10%;
 background: black;
 box-shadow: 0 -1px 2px black;
    }

    .innerRightEye:after{
 content: "";
 position: absolute;
 width: 10px;
 height: 13px;
 bottom: -1px;
 left: 4px;
 border-top-left-radius: 50% 100%;
 border-top-right-radius: 35% 80%;
 background: white;
    }

    .fix {
 position: absolute;
 width: 4px;
 height: 4px;
 border-radius: 50%;
 background: black;
 top: 17px;
    }

    .fix:after{
 content: "";
 position: absolute;
 width: 4px;
 height: 4px;
 border-radius: 50%;
 background: black;
 top: 0;
 left: 14px;
    }

    .mouthTopContainer {
 position: absolute;
 width: 158px;
 height: 29px;
 z-index: 1;
 top: 120px;
 left: 39px;
 overflow: hidden;
    }
    .mouthTop{
 width: 158px;
 height: 34px;
 position: absolute;
 z-index: 1;
 border:1px solid #FFA600;
 background: #FFA600;
 top: 0;
 left: 0;
 border-top-left-radius: 45% 34px;
 border-top-right-radius: 45% 34px;
 
    }

    .mouthBottomContainer {
 position: absolute;
 width: 158px;
 height: 15px;
 z-index: 1;
 top: 146px;
 left: 39px;
 overflow: hidden;
    }
    .mouthBottom{
 width: 158px;
 height: 24px;
 position: absolute;
 z-index: 1;
 border:1px solid #FFA600;
 background: #FFA600;
 border-top:none;
 top: -4px;
 left: 0;
 border-bottom-left-radius: 45% 24px;
 border-bottom-right-radius: 45% 24px;
 background-color: #FFA600;
    }

    .lips{
 border: 1px solid #FFA600;
 background: #FFA600;
 width: 116px;
 height: 24px;
 position: absolute;
 top: 146px;
 left: 60px;
 border-top: none;
 border-bottom-left-radius: 50% 100%;
 border-bottom-right-radius: 50% 100%;
    }

    .lipShadow {
 width: 0px;
 height: 0px;
 position: absolute;
 z-index: 2;
 border-top: 20px solid transparent;
 border-bottom: 20px solid transparent;
 border-right: 8px solid black;
 -webkit-transform-origin: top right;
 -webkit-transform: rotate(-60deg);
 -moz-transform-origin: top right;
 -moz-transform: rotate(-60deg);
 -o-transform-origin: top right;
 -o-transform: rotate(-60deg);
 transform-origin: top right;
 transform: rotate(-60deg);
 left: -12px;
 top: 4px;
    }

    .lipShadow.right{
 left:114px;
 -webkit-transform: rotate(60deg) rotateY(180deg);
 -moz-transform: rotate(60deg) rotateY(180deg);
 -o-transform: rotate(60deg) rotateY(180deg);
 transform: rotate(60deg) rotateY(180deg);
    }

    .body{
 width: 326px;
 height: 300px;
 
 top: 135px;
 left: 48px;
 position: absolute;
    }

    .scarf {
 border: 4px solid #000;
 position: absolute;
 background: #FB0009;
 z-index: 5;
 width: 258px;
 height: 110px;
 top: -2px;
 left: 34px;
 border-top-left-radius: 30px 34px;
 border-top-right-radius: 38px 34px;
 border-bottom-left-radius: 50% 76px;
 border-bottom-right-radius: 50% 76px;
 border-top: none;
    }

    .scarfShadow {
 position: absolute;
 border-top: 6px solid #000;
 width: 60px;
 height: 70px;
 top: 0px;
 left: 6px;
 border-top-left-radius: 90px 120px;
 border-top-right-radius: 30px 30px;
 -webkit-transform: rotate(-79deg);
 -moz-transform: rotate(-79deg);
 -o-transform: rotate(-79deg);
 transform: rotate(-79deg);
    }

    .scarfShadowRight {
 position: absolute;
 border-right: 6px solid black;
 width: 100px;
 height: 70px;
 top: 8px;
 left: 143px;
 border-bottom-right-radius: 70px 70px;
 z-index: 6;
    }

    .scarfEnd{
 position: absolute;
 width: 52px;
 height: 64px;
 z-index: 4;
 top: 90px;
 border: 3px solid black;
 left: 74px;
 border-bottom-left-radius: 50% 43%;
 border-bottom-right-radius: 15px;
 border-top-left-radius: 20% 57%;
 background: #FB0009;
    }

    .scarfEndShadow{
 position: absolute;
 border-top: 6px solid black;
 width: 20px;
 height: 20px;
 top: 6px;
 left: 12px;
 border-top-left-radius: 30px 30px;
 -webkit-transform-origin: top right;
 -moz-transform-origin: top right;
 -o-transform-origin: top right;
 transform-origin: top right;
 z-index: 10;
 -webkit-transform: skewX(4deg) scaleY(1.5) rotate(-60deg);
 -moz-transform: skewX(4deg) scaleY(1.5) rotate(-60deg);
 -o-transform: skewX(4deg) scaleY(1.5) rotate(-60deg);
 transform: skewX(4deg) scaleY(1.5) rotate(-60deg);

    }

    .innerWrapper{
 position: absolute;
 overflow: hidden;
 width: 280px;
 height: 200px;
 left: 30px;
 top: 76px;
    }

    .inner {
 border: 1px solid #000;
 width: 218px;
 position: absolute;
 height: 210px;
 border-radius: 50%;
 left: 25px;
 top: -71px;
 z-index: 4;
 background: #fff;
    }

    .outterWrapper{
 width: 262px;
 left: 32px;
 height: 250px;
 position: absolute;
 top: 54px;
 overflow: hidden;
    }

    .outter{
 border: 1px solid #000;
 width: 260px;
 height: 250px;
 border-radius: 125px;
 position: absolute;
 top: -84px;
 z-index: 3;
 background: #000;
    }

    .handWrapper{
 position: absolute;
 top: 219px;
 left: 7px;
    }


    .leftHandTopContainer{
 width: 118px;
 height: 26px;
 position: absolute;
 z-index: 1;
 top: 55px;
 left: 50px;
 -webkit-transform-origin: bottom left;
 -webkit-transform: rotate(-70deg);
 -moz-transform-origin: bottom left;
 -moz-transform: rotate(-70deg);
 -o-transform-origin: bottom left;
 -o-transform: rotate(-70deg);
 transform-origin: bottom left;
 transform: rotate(-70deg);
 overflow: hidden;
    }

    .leftHandTop{
 width: 128px;
 height: 54px;
 border: 1px solid #050346;
 position: absolute;
 border-top-left-radius: 44% 38px;
 border-top-right-radius: 56% 33px;
 background: #000;
    }

    .leftHandBottomContainer {
 width: 100px;
 height: 30px;
 position: absolute;
 z-index: 1;
 top: 78px;
 left: 50px;
 -webkit-transform-origin: top left;
 -webkit-transform: rotate(-70deg);
 -moz-transform-origin: top left;
 -moz-transform: rotate(-70deg);
 -o-transform-origin: top left;
 -o-transform: rotate(-70deg);
 transform-origin: top left;
 transform: rotate(-70deg);
 overflow: hidden;
    }

    .leftHandBottom{
 width: 128px;
 height: 44px;
 border: 1px solid #050346;
 background: #000;
 border-top: none;
 position: absolute;
 border-bottom-left-radius: 48% 20px;
 border-bottom-right-radius: 52% 23px;
 top: -26px;
    }


    .rightHandTopContainer{
 width: 118px;
 height: 34px;
 position: absolute;
 z-index: 3;
 top: 47px;
 left: 240px;
 -webkit-transform-origin: bottom right;
 -webkit-transform: rotate(65deg);
 -moz-transform-origin: bottom right;
 -moz-transform: rotate(65deg);
 -o-transform-origin: bottom right;
 -o-transform: rotate(65deg);
 transform-origin: bottom right;
 transform: rotate(65deg);
 overflow: hidden;
    }

    .rightHandTop{
 width: 148px;
 height: 54px;
 border: 1px solid #050346;
 position: absolute;
 border-top-right-radius: 41% 54px;
 border-top-left-radius: 59% 48px;
 background: black;
 left: -30px;
 -webkit-transform: rotateY(-180deg);
 -moz-transform: rotateY(-180deg);
 -o-transform: rotateY(-180deg);
 transform: rotateY(-180deg);
    }

    .rightHandBottomContainer{
 width: 110px;
 height: 58px;
 position: absolute;
 z-index: 1;
 top: 81px;
 left: 248px;
 -webkit-transform-origin: top right;
 -webkit-transform: rotate(90deg);
 -moz-transform-origin: top right;
 -moz-transform: rotate(90deg);
 -o-transform-origin: top right;
 -o-transform: rotate(90deg);
 transform-origin: top right;
 transform: rotate(90deg);
 overflow: hidden;
    }

    .rightHandBottom{
 width: 68px;
 height: 28px;
 border: 1px solid #000;
 background: black;
 border-top: none;
 position: absolute;
 top: 1px;
 left: 38px;
 border-bottom-right-radius: 100% 40px;
 z-index: 999;
    }

    .footWrapper{
 position: absolute;
 top: 292px;
 left: 80px;
    }

    .leftFootTopWrapper {
 position: absolute;
 width: 130px;
 top: 16px;
 left: -1px;
 height: 37px;
 overflow: hidden;
 z-index: 2;
    }

    .leftFootTop{
 position: absolute;
 width: 120px;
 height: 60px;
 border: 4px solid black;
 background: #FF9C00;
 border-top-left-radius: 80% 70%;
 top: -10px;
 left: 3px;
    }

    .toe {
 position: absolute;
 border-top: 4px solid black;
 width: 25px;
 height: 20px;
 top: 50px;
 left: 2px;
 border-top-right-radius: 30px 30px;
 border-top-left-radius: 10px 10px;
 -webkit-transform-origin: top left;
 -moz-transform-origin: top left;
 -o-transform-origin: top left;
 transform-origin: top left;
 z-index: 10;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
    }

    .toe.right{
 -webkit-transform: rotate(45deg) rotateY(180deg);
 -moz-transform: rotate(45deg) rotateY(180deg);
 -o-transform: rotate(45deg) rotateY(180deg);
 transform: rotate(45deg) rotateY(180deg);
 left: 264px;
    }

    .leftFootBottomWrapper {
 position: absolute;
 width: 130px;
 top: 52px;
 left: -1px;
 height: 38px;
 overflow: hidden;
 z-index: 2;
    }

    .leftFootBottom{
 position: absolute;
 width: 120px;
 height: 60px;
 border: 4px solid #000;
 background: #FF9C00;
 border-top-left-radius: 50% 44%;
 border-top-right-radius: 50% 44%;
 border-bottom-left-radius: 50% 56%;
 border-bottom-right-radius: 50% 56%;
 top: -30px;
 left: 3px;
    }


    .rightFootTopWrapper {
 position: absolute;
 width: 134px;
 top: 22px;
 left: 134px;
 height: 36px;
 overflow: hidden;
 z-index: 2;
    }

    .rightFootTop{
 position: absolute;
 width: 120px;
 height: 60px;
 border: 4px solid black;
 background: #FF9C00;
 border-top-right-radius: 32% 65%;
 top: 0px;
 left: 4px;
    }

    .rightFootBottomWrapper {
 position: absolute;
 width: 134px;
 top: 52px;
 left: 134px;
 height: 38px;
 overflow: hidden;
    }

    .rightFootBottom{
 position: absolute;
 width: 120px;
 height: 60px;
 border: 4px solid #000;
 background: #FF9C00;
 border-top-left-radius: 50% 56%;
 border-top-right-radius: 50% 56%;
 border-bottom-left-radius: 50% 44%;
 border-bottom-right-radius: 50% 44%;
 top: -30px;
 left: 3px;
    }

    .rightToe {
 position: absolute;
 width: 40px;
 height: 10px;
 border: 2px solid #000;
 background: #FF9C00;
 border-radius: 50%;
 -webkit-transform-origin: bottom right;
 -webkit-transform: rotate(34deg);
 -moz-transform-origin: bottom right;
 -moz-transform: rotate(34deg);
 -o-transform-origin: bottom right;
 -o-transform: rotate(34deg);
 transform-origin: bottom right;
 transform: rotate(34deg);
 top: 35px;
 left: 210px;
 z-index: 1;
    }

    .copyright{
 margin: 50px 0 0 0;
 height: 50px;
 color: #999;
 font-family: Tahoma;
 font-size: 12px;
 text-align: center;
    }

    .copyright a {
 color: #999;
 text-decoration: none;
    }

    .copyright a:hover, .copyright a:focus {
 outline: none;
 text-decoration: underline;
    }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。