CSS3绘制各类图形

一、圆形

最常用，设置宽=高，border-radius为宽或高的一半即可。

.circle{
    width:100px;
    height:100px;
    border-radius:50%;//或者50px
    background-color:#000;
}

二、椭圆

宽≠高（相等则为圆形了）border-radius的水平半径为宽的50%，垂直半径为高的50%。

.oval{
    width:200px;
    height:100px;
    border-radius: 100px / 40px；//：水平半径 /垂直半径
    background-color:#000;
}

三、梯形

width为基准边的长度，border-bottom/border-top控制梯形的高，此属性需要设置颜色。border-left和border-right为梯形两边的倾斜度，如一边设置为0则为直角梯形，颜色透明；将width换成height，则基准线为垂直的，border-left/border-right控制梯形的高（数学意义上，画面上其实是横着的），此属性需要设置颜色。border-top和border-bottom为梯形两边的倾斜度，如一边设置为0则为直角梯形，颜色透明。
两种方式其实就是改变梯形数学意义上底和高的方向，通过对数值的调整，可以绘制出任何梯形。

.oval1{
    width:200px;
    border-bottom: 100px solid #ec3504;
    border-left: 10px solid #000;
    border-right: 10px solid transparent;
}//等腰梯形
.oval2{
    height: 200px;
    border-left: 100px solid #ec3504;
    border-bottom: 10px solid transparent;
    border-top: 0px solid transparent;
}//直角梯形

四、三角形

有一条基准边，width：0（水平），然后用border-bottom（尖头朝上）/border-top（尖头朝下）控制高线长度，此属性需要设置颜色。border-left和border-right控制两边的倾斜度，此属性颜色值为透明。基准边height：0（垂直）同理类推。其实和梯形的唯一区别就是，基准边width和height的数值，三角形是尖头的，所以为0。

.triangle {
    width: 0;
    border-bottom: 140px solid #fcf921;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}   

五、平行四边形

平行四边形的制作方式是使用transform属性使长方形倾斜一个角度。

.parallelogram {
    width: 160px;
    height: 100px;//平行四边形的底和高
    transform: skew(-25deg);
}   

五、平行四边形

平行四边形的制作方式是使用transform属性使长方形倾斜一个角度。

.parallelogram {
    width: 160px;
    height: 100px;//平行四边形的底和高
    transform: skew(-25deg);
}   

六、五角星等拼接图形

五角星的绘制较复杂，但是是用基本图形三角形来拼接的，位置和大小调整好即可。六角星同理可用两个三角形拼接。六边形在一个长方形上下各绘制一个三角形即可。

//五角星
.star {
    width: 0;
    margin: 50px 0;
    color: #fc2e5a;
    position: relative;
    display: block;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    transform: rotate(35deg);
}

.star:before {
    height: 0;
    position: absolute;
    display: block;
    top: -45px;
    left: -65px;
    border-bottom: 80px solid #000;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    content: '';
    transform: rotate(-35deg);
    z-index:999;
}
.star:after {
    content: '';
    width: 0;
    position: absolute;
    display: block;
    top: 3px;
    left: -105px;
    color: #fc2e5a;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    transform: rotate(-70deg);
}  
//六角星
.star_six_points {
    width: 0;
    display: block;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #de34f7;
    margin: 10px auto;
}
.star_six_points:after {
    content: "";
    width: 0;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #de34f7;
    margin: 30px 0 0 -50px;
}  
//六边形
.hexagon {
    width: 100px;
    height: 55px;
    background: #fc5e5e;
    position: relative;
    margin: 10px auto;
}
.hexagon:before {
    content: "";
    width: 0;
    position: absolute;
    top: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid #fc5e5e;
}

.hexagon:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid #fc5e5e;
}             

七、心形

两个矩形，一端通过border-radius设置成半圆形，再旋转这两个图形拼合成心形

.heart {
    position: relative;
}
    #heart:before,#heart:after {
    content: "";
    width:70px;
    height: 115px;
    position: absolute;
    background: red;
    left: 70px;
    top: 0;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);    
    transform-origin: 0 100%;
}



.heart:after {
    left: 0;
    background: #000;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}   

八、蛋形

蛋形时椭圆形的一个变体，它的高度要比宽度稍大，并且设置正确的border-radius属性即可以制作出一个蛋形。

.egg {
    width: 136px;
    height: 190px;
    background: #ffc000;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}   

九、无穷符号

无穷符号由两个矩形设置三边border-radius50%，并分别顺时逆时旋转45度，从直角边部分拼接而成。

.infinity {
    width: 220px;
    height: 100px;
    position: relative;
}

.infinity:before,#infinity:after {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    border: 20px solid #06c999;
    border-radius: 50px 50px 0 50px;
    transform: rotate(-45deg);
}

.infinity:after {
    left: auto;
    right: 0;
    border: 20px solid #000;
    border-radius: 50px 50px 50px 0;
    transform: rotate(45deg);
}