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);
}