CSS3實現二十多種基本圖形

CSS3能夠實現不少漂亮的圖形，我收集了32種圖形，在下面列出。直接用CSS3畫出這些圖形，要比貼圖性能更好，體驗更加，是一種很是好的網頁美觀方式。

      這32種圖形分別爲圓形，橢圓形，三角形，倒三角形，左三角形，右三角形，菱形，梯形，長方形，正方形，圓環，平行四邊形，五角星，六角星，五邊形，六邊形，八邊形，心形，蛋形，無窮符號，消息提示框，鑽石，八卦圖，食豆人，扇形，月牙，頂左直角三角形，頂右直角三角形 ，底左直角三角形 ，底右直角三角形 ，八角形， 十二角形。
      網頁代碼中用到（<!-- 浮動Div換行 --> <div style="clear:both">）和Div邊距設置和浮動（margin: 20px 20px; float: left;）

1. 圓形：設置寬度和高度相等，border-radius屬性爲寬度或高度的一半。

     效果圖：

                    

#Circle{  
  width:100px;  
  height:100px;  
  float: left;  
  background: #6fee1d;  
  -moz-border-radius: 50px;  
  -webkit-border-radius: 50px;  
  border-radius: 50px;  
}

 2.橢圓形：圓形的變體，高度設置爲寬度的一半，border-radius屬性爲高度除以高度一半。

    效果圖：

                 

#Oval {  
   width: 200px;  
   height: 100px;  
   float: left;  
   background: #e9880c;  
   -webkit-border-radius: 100px / 50px;  
   -moz-border-radius: 100px / 50px;  
   border-radius: 100px / 50px;  
 } 

　　

3.三角形：寬度和高度設置爲0，border設置左，右邊透明，底邊可見Solid。

    效果圖：

                 

#Triangle {  
   width: 0;  
   height: 0;  
   float: left;  
   border-bottom: 100px solid #fcf706;  
   border-left: 50px solid transparent;  
   border-right: 50px solid transparent;  
 } 

  4.倒三角形：寬度和高度設置爲0，border設置左，右邊透明，頂邊可見Solid。

    效果圖：

             

#InvertedTriangle {  
   width: 0;  
   height: 0;  
   float: left;  
   border-top: 100px solid #30a3bf;  
   border-left: 50px solid transparent;  
   border-right: 50px solid transparent;  
 } 

　　

5.左三角形：寬度和高度設置爲0，border設置上，下邊透明，右邊可見Solid。

    效果圖：

              

 

#LeftTriangle {  
  width: 0;  
  height: 0;  
  float: left;  
  border-top: 50px solid transparent;  
  border-right: 100px solid #466f20;  
  border-bottom: 50px solid transparent;  
}  

6.菱形：使用transform和rotate相結合，使兩個正反三角形上下顯示。

     效果圖：

           

#Diamond {  
  width: 100px;  
  height: 100px;  
  float: left;  
  background: #8e00ff;  
  /* Rotate */  
  -webkit-transform: rotate(-45deg);  
  -moz-transform: rotate(-45deg);  
  -ms-transform: rotate(-45deg);  
  -o-transform: rotate(-45deg);  
  transform: rotate(-45deg);  
  /* Rotate Origin */  
  -webkit-transform-origin: 0 100%;  
  -moz-transform-origin: 0 100%;  
  -ms-transform-origin: 0 100%;  
  -o-transform-origin: 0 100%;  
  transform-origin: 0 100%;  
  margin: 40px 0 10px 240px;  
 }

　　

7.梯形：三角形的變體，設置左右兩條邊相等，而且給它設置一個寬度。

    效果圖：

              

#Trapezium {  
 height: 0;  
 width: 100px;  
 float: left;  
 border-bottom: 100px solid #dc2500;  
 border-left: 50px solid transparent;  
 border-right: 50px solid transparent;  
}  

8.圓環：在圓形的基礎上設置邊界，邊界顏色與圓形填充顏色不一樣。

      效果圖：

          

#Ring {  
 width: 100px;  
 height: 100px;  
 float: left;  
 background-color: white;  
 border-radius: 80px;  
 border:5px #ffd700 solid;  
} 

　　

9.平行四邊形：使用transform使長方形傾斜一個角度。

     效果圖：

             

　　

　　

#Parallelogram {  
 width: 120px;  
 height: 80px;  
 float: left;  
 margin-left: 10px;  
 -webkit-transform: skew(30deg);  
 -moz-transform: skew(30deg);  
 -o-transform: skew(30deg);  
 transform: skew(30deg);  
 background-color: #2eda01;  
} 

　　

10.五角星：星形的實現方式比較複雜，主要是使用transform屬性來旋轉不一樣的邊。

      效果圖：

         

#FiveStar {  
   width: 0;  
   height: 0;  
   float: left;  
   margin: 20px 20px;  
   color: #ff0012;  
   position: relative;  
   display: block;  
   border-right: 80px solid transparent;  
   border-bottom: 60px solid #ff0012;  
   border-left: 80px solid transparent;  
   -moz-transform: rotate(35deg);  
   -webkit-transform: rotate(35deg);  
   -ms-transform: rotate(35deg);  
   -o-transform: rotate(35deg);  
 }  
 #FiveStar:before {  
   height: 0;  
   width: 0;  
   content: '';  
   position: absolute;  
   display: block;  
   top: -35px;  
   left: -50px;  
   border-bottom: 60px solid #ff0012;  
   border-left: 20px solid transparent;  
   border-right: 20px solid transparent;  
   -webkit-transform: rotate(-35deg);  
   -moz-transform: rotate(-35deg);  
   -ms-transform: rotate(-35deg);  
   -o-transform: rotate(-35deg);  
 }  
 #FiveStar:after {  
   width: 0;  
   height: 0;  
   content: '';  
   position: absolute;  
   display: block;  
   top: 3px;  
   left: -85px;  
   color: #ff0012;  
   border-right: 80px solid transparent;  
   border-bottom: 60px solid #ff0012;  
   border-left: 80px solid transparent;  
   -webkit-transform: rotate(-70deg);  
   -moz-transform: rotate(-70deg);  
   -ms-transform: rotate(-70deg);  
   -o-transform: rotate(-70deg);  
 }  

　

11.六角星：使用transform屬性來旋轉不一樣的邊。

     效果圖：

           

#SixStar{  
  width: 0;  
  height: 0;  
  float: left;  
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;  
  border-bottom: 100px solid #cfd810;  
  position: relative;  
 }  
 #SixStar:after{  
  width: 0;  
  height: 0;  
  content: "";  
  border-top: 100px solid #cfd810;  
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;  
  position: absolute;  
  top: 30px;  
  left: -50px;  
 }

　　

　　

12.六邊形：在長方形上面和下面各放置一個三角形。

       效果圖：

                

#Hexagon {  
   width: 100px;  
   height: 55px;  
   float: left;  
   background: #000001;  
   position: relative;  
   margin: 10px auto;  
 }  
 #Hexagon:before {  
   content: "";  
   width: 0;  
   height: 0;  
   position: absolute;  
   top: -25px;  
   left: 0;  
   border-left: 50px solid transparent;  
   border-right: 50px solid transparent;  
   border-bottom: 25px solid #000001;  
}  
#Hexagon:after {  
  content: "";  
  width: 0;  
  height: 0;  
  position: absolute;  
  bottom: -25px;  
  left: 0;  
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;  
  border-top: 25px solid #000001;  
}  

　

13.五邊形：能夠採用三角形和梯形組合。

       效果圖：

               

#Pentagon{  
  width: 60px;  
  float: left;  
  position: relative;  
  border-width: 52px 20px 0;  
  border-style: solid;  
  border-color: #711ee2 transparent;  
}  
#Pentagon:before{  
  content: "";  
  position: absolute;  
  width: 0;  
  height: 0;  
  top: -92px;  
  left: -20px;  
  border-width: 0 50px 40px;  
  border-style: solid;  
  border-color: transparent transparent #711ee2;  
}  

　　

 

  14.八邊形：在長方形上面和下面各放置一個梯形。

    效果圖：

           

#Octagon{  
  width: 100px;  
  height: 100px;  
  float: left;  
  margin: 10px 10px;  
  background-color: #66e006;  
  position: relative;  
 }  
 #Octagon:before{  
  width: 42px;  
  height: 0;  
  top: 0;  
  left: 0;  
  position: absolute;  
  content: "";  
  border-left: 29px solid #ffffff;  
  border-right: 29px solid #ffffff;  
  border-bottom: 29px solid #66e006;  
 }  
 #Octagon:after{  
  width: 42px;  
  height: 0;  
  left: 0;  
  bottom: 0;  
  position: absolute;  
  content: "";  
  border-left: 29px solid #ffffff;  
  border-right: 29px solid #ffffff;  
  border-top: 29px solid #66e006;  
 }  

　　

 15.心形：心形的製做是很是複雜的，能夠使用僞元素來製做，分別將僞元素旋轉不一樣的角度，並修改transform-origin屬性來設置元素的旋轉中心點。

     效果圖：

        

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

　　16.蛋形：橢圓形的變體，高度比寬度稍大，設置正確的border-radius屬性。

     效果圖：

          

#Egg {  
  width: 100px;  
  height: 160px;  
  float: left;  
  background: #ffb028;  
  display: block;  
  -webkit-border-radius: 60px 60px 60px 60px / 100px 100px 68px 68px;  
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;  
 }  

　　

17.無窮符號：經過border屬性和設置僞元素的角度來實現。

     效果圖：

             

#Infinity {  
  width: 220px;  
  height: 100px;  
  float: left;  
  position: relative;  
 }  
 #Infinity:before, #Infinity:after {  
  content: "";  
  width: 60px;  
  height: 60px;  
  position: absolute;  
  top: 0;  
  left: 0;  
  border: 20px solid #008bb0;  
  -moz-border-radius: 50px 50px 0;  
  border-radius: 50px 50px 0 50px;  
  -webkit-transform: rotate(-45deg);  
  -moz-transform: rotate(-45deg);  
  -ms-transform: rotate(-45deg);  
  -o-transform: rotate(-45deg);  
  transform: rotate(-45deg);  
 }  
 #Infinity:after {  
  left: auto;  
  right: 0;  
  -moz-border-radius: 50px 50px 50px 0;  
  border-radius: 50px 50px 50px 0;  
  -webkit-transform: rotate(45deg);  
  -moz-transform: rotate(45deg);  
  -ms-transform: rotate(45deg);  
  -o-transform: rotate(45deg);  
  transform: rotate(45deg);  
 }  

　　18.消息提示框：一個圓角矩形加左邊中間的一個小三角形。

 

     效果圖：

           

#CommentBubble {  
   width: 140px;  
   height: 100px;  
   margin: 30px 20px;  
   float: left;  
   background: #8867b9;  
   position: relative;  
   -moz-border-radius: 12px;  
   -webkit-border-radius: 12px;  
   border-radius: 12px;  
 }  
 #CommentBubble:before {  
   content: "";  
   width: 0;  
   height: 0;  
   right: 100%;  
   top: 38px;  
   position: absolute;  
   border-top: 13px solid transparent;  
   border-right: 26px solid #8867b9;  
   border-bottom: 13px solid transparent;  
 }  

　　19.鑽石：上面一個梯形，下面一個三角形組成。

      效果圖：

             

#Diamonds{  
  width: 50px;  
  height: 0;  
  float: left;  
  border-style: solid;  
  border-color: transparent transparent #9aff02 transparent;  
  border-width: 0 25px 25px 25px;  
  position: relative;  
  margin: 20px 0 50px 0;  
}  
#Diamonds:after{  
  width: 0;  
  height: 0;  
  top: 25px;  
  left: -25px;  
  border-style: solid;  
  border-color: #9aff02 transparent transparent transparent;  
  border-width: 70px 50px 0 50px;  
  position: absolute;  
  content: "";  
 }  

　　 20.八卦圖：多個圓形的組合。

       效果圖：

          

#EightDiagrams{  
  width: 96px;  
  height: 48px;  
  margin: 20px 20px;  
  float: left;  
  background-color: #ffffff;  
  border-color: #000000;  
  border-style: solid;  
  border-width: 2px 2px 50px 2px;  
  border-radius: 100%;  
  position: relative;  
 }  
 #EightDiagrams:before {  
  width: 12px;  
  height: 12px;  
  top: 50%;  
  left: 0;  
  content: "";  
  position: absolute;  
  background-color: #ffffff;  
  border: 18px solid #000000;  
  border-radius: 100%;  
 }  
 #EightDiagrams:after {  
  width: 12px;  
  height: 12px;  
  top: 50%;  
  left: 50%;  
  background-color: #000000;  
  border: 18px solid #ffffff;  
  border-radius:100%;  
  content: "";  
  position: absolute;  
 }  

　　   21.食豆人：設置border和border-top-left-radius，border-bottom-right-radius等屬性。

       效果圖：

        

#PacMan {  
 width: 0;  
 height: 0;  
 float: left;  
 border-right: 60px solid transparent;  
 border-left: 60px solid #300fed;  
 border-top: 60px solid #300fed;  
 border-bottom: 60px solid #300fed;  
 border-top-left-radius: 60px;  
 border-top-right-radius: 60px;  
 border-bottom-left-radius: 60px;  
 border-bottom-right-radius: 60px;  
}  

　　 22.扇形：在三角形的基礎上，讓其中一邊成弧形 。

       效果圖：

          

#Sector {  
   width:0;  
   height:0;  
   float: left;  
   background-color: #ffffff;  
   border-left: 70px solid transparent;  
   border-right: 70px solid transparent;  
   border-top: 100px solid #ab9ed1;  
   border-radius:50%;  
 }  

　 23.月牙：由兩條弧線組成的，每一個弧線能夠當作一個圓的一部分弧長，在圓的基礎上讓圓有一個陰影能夠造成一個月牙。

        效果圖：

            

#CrescentMoon{  
   width:80px;  
   height:80px;  
   float: left;  
   background-color: #ffffff;  
   border-radius:50%;  
   box-shadow: 15px 15px 0 0 #9600d2;  
 }  

　　24.頂左直角三角形。

       效果圖：

          

#TopLeftTriangle {  
   width: 0px;  
   height: 0px;  
   margin: 10px 10px;  
   float: left;  
   border-top: 100px solid #7efde1;  
   border-right: 100px solid transparent;  
 }

　　25.八角形。

        效果圖：

                  

#Burst8 {  
 width: 80px;  
 height: 80px;  
 margin: 10px 10px;  
 float: left;  
 background-color: #cf7668;  
 position: relative;  
 transform:rotate(20deg);  
 -webkit-transform:rotate(20deg);  
 -ms-transform:rotate(20deg);  
 -moz-transform:rotate(20deg);  
 -o-transform:rotate(20deg);  
}  
#Burst8:before{  
 width: 80px;  
 height: 80px;  
 top: 0;  
 left: 0;  
 background-color: #cf7668;  
 position: absolute;  
 content: "";  
 transform:rotate(135deg);  
 -webkit-transform:rotate(135deg);  
 -ms-transform:rotate(135deg);  
 -moz-transform:rotate(135deg);  
 -o-transform:rotate(135deg);  
}  

　26.十二角形。

          效果圖：

             

#Burst12 {  
   width: 80px;  
   height: 80px;  
   margin: 20px 20px;  
   float: left;  
   background-color: #a8ff26;  
   position: relative;  
   text-align: center;  
 }  
 #Burst12:before, #Burst12:after{  
   width: 80px;  
   height: 80px;  
   top: 0;  
   left: 0;  
   background-color: #a8ff26;  
   position: absolute;  
   content: "";  
 }  
 #Burst12:before{  
   transform:rotate(30deg);  
   -webkit-transform:rotate(30deg);  
   -ms-transform:rotate(30deg);  
   -moz-transform:rotate(30deg);  
   -o-transform:rotate(30deg);  
 }  
 #Burst12:after{  
   transform:rotate(60deg);  
   -webkit-transform:rotate(60deg);  
   -ms-transform:rotate(60deg);  
   -moz-transform:rotate(60deg);  
   -o-transform:rotate(60deg);  
 }  

　　完整的CSS3+HTML5代碼：

<!DOCTYPE html>  
<html>  
<head>  
  <meta charset="UTF-8">  
  <title>CSS3實現基本圖形</title>  
  <style>  
   #Circle{  
     width:100px;  
     height:100px;  
     float: left;  
     background: #6fee1d;  
     -moz-border-radius: 50px;  
     -webkit-border-radius: 50px;  
     border-radius: 50px;  
   }  
   #Oval {  
     width: 200px;  
     height: 100px;  
     float: left;  
     background: #e9880c;  
     -webkit-border-radius: 100px / 50px;  
     -moz-border-radius: 100px / 50px;  
     border-radius: 100px / 50px;  
   }  
   #Triangle {  
     width: 0;  
     height: 0;  
     float: left;  
     border-bottom: 100px solid #fcf706;  
     border-left: 50px solid transparent;  
     border-right: 50px solid transparent;  
   }  
   #InvertedTriangle {  
     width: 0;  
     height: 0;  
     float: left;  
     border-top: 100px solid #30a3bf;  
     border-left: 50px solid transparent;  
     border-right: 50px solid transparent;  
   }  
   #LeftTriangle {  
     width: 0;  
     height: 0;  
     float: left;  
     border-top: 50px solid transparent;  
     border-right: 100px solid #466f20;  
     border-bottom: 50px solid transparent;  
   }  
   #RightTriangle {  
     width: 0;  
     height: 0;  
     float: left;  
     border-top: 50px solid transparent;  
     border-left: 100px solid #800820;  
     border-bottom: 50px solid transparent;  
   }  
   #Diamond {  
    width: 100px;  
    height: 100px;  
    float: left;  
    background: #8e00ff;  
    /* Rotate */  
    -webkit-transform: rotate(-45deg);  
    -moz-transform: rotate(-45deg);  
    -ms-transform: rotate(-45deg);  
    -o-transform: rotate(-45deg);  
    transform: rotate(-45deg);  
    /* Rotate Origin */  
    -webkit-transform-origin: 0 100%;  
    -moz-transform-origin: 0 100%;  
    -ms-transform-origin: 0 100%;  
    -o-transform-origin: 0 100%;  
    transform-origin: 0 100%;  
    margin: 40px 0 10px 240px;  
   }  
   #Trapezium {  
    height: 0;  
    width: 100px;  
    float: left;  
    border-bottom: 100px solid #dc2500;  
    border-left: 50px solid transparent;  
    border-right: 50px solid transparent;  
   }  
   #Rectangle {  
    height: 50px;  
    width: 100px;  
    float: left;  
    background: #afe05d;  
   }  
   #Square {  
    height: 100px;  
    width: 100px;  
    float: left;  
    background: #b02089;  
   }  
   #Ring {  
    width: 100px;  
    height: 100px;  
    float: left;  
    background-color: white;  
    border-radius: 80px;  
    border:5px #ffd700 solid;  
   }  
   #Parallelogram {  
    width: 120px;  
    height: 80px;  
    float: left;  
    margin-left: 10px;  
    -webkit-transform: skew(30deg);  
    -moz-transform: skew(230deg);  
    -o-transform: skew(30deg);  
    transform: skew(30deg);  
    background-color: #2eda01;  
   }  
  
   #FiveStar {  
     width: 0;  
     height: 0;  
     float: left;  
     margin: 20px 20px;  
     color: #ff0012;  
     position: relative;  
     display: block;  
     border-right: 80px solid transparent;  
     border-bottom: 60px solid #ff0012;  
     border-left: 80px solid transparent;  
     -moz-transform: rotate(35deg);  
     -webkit-transform: rotate(35deg);  
     -ms-transform: rotate(35deg);  
     -o-transform: rotate(35deg);  
   }  
   #FiveStar:before {  
     height: 0;  
     width: 0;  
     content: '';  
     position: absolute;  
     display: block;  
     top: -35px;  
     left: -50px;  
     border-bottom: 60px solid #ff0012;  
     border-left: 20px solid transparent;  
     border-right: 20px solid transparent;  
     -webkit-transform: rotate(-35deg);  
     -moz-transform: rotate(-35deg);  
     -ms-transform: rotate(-35deg);  
     -o-transform: rotate(-35deg);  
   }  
   #FiveStar:after {  
     width: 0;  
     height: 0;  
     content: '';  
     position: absolute;  
     display: block;  
     top: 3px;  
     left: -85px;  
     color: #ff0012;  
     border-right: 80px solid transparent;  
     border-bottom: 60px solid #ff0012;  
     border-left: 80px solid transparent;  
     -webkit-transform: rotate(-70deg);  
     -moz-transform: rotate(-70deg);  
     -ms-transform: rotate(-70deg);  
     -o-transform: rotate(-70deg);  
   }  
  
   #SixStar{  
     width: 0;  
     height: 0;  
     float: left;  
     border-left: 50px solid transparent;  
     border-right: 50px solid transparent;  
     border-bottom: 100px solid #cfd810;  
     position: relative;  
    }  
    #SixStar:after{  
     width: 0;  
     height: 0;  
     content: "";  
     border-top: 100px solid #cfd810;  
     border-left: 50px solid transparent;  
     border-right: 50px solid transparent;  
     position: absolute;  
     top: 30px;  
     left: -50px;  
    }  
  
    #Pentagon{  
      width: 60px;  
      float: left;  
      position: relative;  
      border-width: 52px 20px 0;  
      border-style: solid;  
      border-color: #711ee2 transparent;  
    }  
    #Pentagon:before{  
      content: "";  
      position: absolute;  
      width: 0;  
      height: 0;  
      top: -92px;  
      left: -20px;  
      border-width: 0 50px 40px;  
      border-style: solid;  
      border-color: transparent transparent #711ee2;  
    }  
  
    #Hexagon {  
      width: 100px;  
      height: 55px;  
      float: left;  
      background: #000001;  
      position: relative;  
      margin: 10px auto;  
    }  
    #Hexagon:before {  
      content: "";  
      width: 0;  
      height: 0;  
      position: absolute;  
      top: -25px;  
      left: 0;  
      border-left: 50px solid transparent;  
      border-right: 50px solid transparent;  
      border-bottom: 25px solid #000001;  
   }  
   #Hexagon:after {  
     content: "";  
     width: 0;  
     height: 0;  
     position: absolute;  
     bottom: -25px;  
     left: 0;  
     border-left: 50px solid transparent;  
     border-right: 50px solid transparent;  
     border-top: 25px solid #000001;  
   }  
  
   #Octagon{  
    width: 100px;  
    height: 100px;  
    float: left;  
    margin: 10px 10px;  
    background-color: #66e006;  
    position: relative;  
   }  
   #Octagon:before{  
    width: 42px;  
    height: 0;  
    top: 0;  
    left: 0;  
    position: absolute;  
    content: "";  
    border-left: 29px solid #ffffff;  
    border-right: 29px solid #ffffff;  
    border-bottom: 29px solid #66e006;  
   }  
   #Octagon:after{  
    width: 42px;  
    height: 0;  
    left: 0;  
    bottom: 0;  
    position: absolute;  
    content: "";  
    border-left: 29px solid #ffffff;  
    border-right: 29px solid #ffffff;  
    border-top: 29px solid #66e006;  
   }  
  
   #Heart {  
    float: left;  
    position: relative;  
   }  
   #Heart:before, #Heart:after {  
    content: "";  
    width: 70px;  
    height: 115px;  
    position: absolute;  
    background: red;  
    left: 70px;  
    top: 0;  
    -webkit-border-radius: 50px 50px 0 0;  
    -moz-border-radius: 50px 50px 0 0;  
    border-radius: 50px 50px 0 0;  
    -webkit-transform: rotate(-45deg);  
    -moz-transform: rotate(-45deg);  
    -ms-transform: rotate(-45deg);  
    -o-transform: rotate(-45deg);  
    transform: rotate(-45deg);  
    -webkit-transform-origin: 0 100%;  
    -moz-transform-origin: 0 100%;  
    -ms-transform-origin: 0 100%;  
    -o-transform-origin: 0 100%;  
    transform-origin: 0 100%;  
  }  
  #Heart:after {  
    left: 0;  
    -webkit-transform: rotate(45deg);  
    -moz-transform: rotate(45deg);  
    -ms-transform: rotate(45deg);  
    -o-transform: rotate(45deg);  
    transform: rotate(45deg);  
    -webkit-transform-origin: 100% 100%;  
    -moz-transform-origin: 100% 100%;  
    -ms-transform-origin: 100% 100%;  
    -o-transform-origin: 100% 100%;  
    transform-origin: 100% 100%;  
   }  
  
   #Egg {  
    width: 100px;  
    height: 160px;  
    float: left;  
    background: #ffb028;  
    display: block;  
    -webkit-border-radius: 60px 60px 60px 60px / 100px 100px 68px 68px;  
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;  
   }  
  
   #Infinity {  
    width: 220px;  
    height: 100px;  
    float: left;  
    position: relative;  
   }  
   #Infinity:before, #Infinity:after {  
    content: "";  
    width: 60px;  
    height: 60px;  
    position: absolute;  
    top: 0;  
    left: 0;  
    border: 20px solid #008bb0;  
    -moz-border-radius: 50px 50px 0;  
    border-radius: 50px 50px 0 50px;  
    -webkit-transform: rotate(-45deg);  
    -moz-transform: rotate(-45deg);  
    -ms-transform: rotate(-45deg);  
    -o-transform: rotate(-45deg);  
    transform: rotate(-45deg);  
   }  
   #Infinity:after {  
    left: auto;  
    right: 0;  
    -moz-border-radius: 50px 50px 50px 0;  
    border-radius: 50px 50px 50px 0;  
    -webkit-transform: rotate(45deg);  
    -moz-transform: rotate(45deg);  
    -ms-transform: rotate(45deg);  
    -o-transform: rotate(45deg);  
    transform: rotate(45deg);  
   }  
  
   #CommentBubble {  
     width: 140px;  
     height: 100px;  
     margin: 30px 20px;  
     float: left;  
     background: #8867b9;  
     position: relative;  
     -moz-border-radius: 12px;  
     -webkit-border-radius: 12px;  
     border-radius: 12px;  
   }  
   #CommentBubble:before {  
     content: "";  
     width: 0;  
     height: 0;  
     right: 100%;  
     top: 38px;  
     position: absolute;  
     border-top: 13px solid transparent;  
     border-right: 26px solid #8867b9;  
     border-bottom: 13px solid transparent;  
   }  
  
   #Diamonds{  
     width: 50px;  
     height: 0;  
     float: left;  
     border-style: solid;  
     border-color: transparent transparent #9aff02 transparent;  
     border-width: 0 25px 25px 25px;  
     position: relative;  
     margin: 20px 0 50px 0;  
   }  
   #Diamonds:after{  
     width: 0;  
     height: 0;  
     top: 25px;  
     left: -25px;  
     border-style: solid;  
     border-color: #9aff02 transparent transparent transparent;  
     border-width: 70px 50px 0 50px;  
     position: absolute;  
     content: "";  
    }  
  
    #EightDiagrams{  
     width: 96px;  
     height: 48px;  
     margin: 20px 20px;  
     float: left;  
     background-color: #ffffff;  
     border-color: #000000;  
     border-style: solid;  
     border-width: 2px 2px 50px 2px;  
     border-radius: 100%;  
     position: relative;  
    }  
    #EightDiagrams:before {  
     width: 12px;  
     height: 12px;  
     top: 50%;  
     left: 0;  
     content: "";  
     position: absolute;  
     background-color: #ffffff;  
     border: 18px solid #000000;  
     border-radius: 100%;  
    }  
    #EightDiagrams:after {  
     width: 12px;  
     height: 12px;  
     top: 50%;  
     left: 50%;  
     background-color: #000000;  
     border: 18px solid #ffffff;  
     border-radius:100%;  
     content: "";  
     position: absolute;  
    }  
  
    #PacMan {  
     width: 0;  
     height: 0;  
     float: left;  
     border-right: 60px solid transparent;  
     border-left: 60px solid #300fed;  
     border-top: 60px solid #300fed;  
     border-bottom: 60px solid #300fed;  
     border-top-left-radius: 60px;  
     border-top-right-radius: 60px;  
     border-bottom-left-radius: 60px;  
     border-bottom-right-radius: 60px;  
    }  
  
    #Sector {  
      width:0;  
      height:0;  
      float: left;  
      background-color: #ffffff;  
      border-left: 70px solid transparent;  
      border-right: 70px solid transparent;  
      border-top: 100px solid #ab9ed1;  
      border-radius:50%;  
    }  
  
    #CrescentMoon{  
      width:80px;  
      height:80px;  
      float: left;  
      background-color: #ffffff;  
      border-radius:50%;  
      box-shadow: 15px 15px 0 0 #9600d2;  
    }  
  
    #TopLeftTriangle {  
      width: 0px;  
      height: 0px;  
      margin: 10px 10px;  
      float: left;  
      border-top: 100px solid #7efde1;  
      border-right: 100px solid transparent;  
    }  
    #TopRightTriangle {  
      width: 0px;  
      height: 0px;  
      margin: 10px 10px;  
      float: left;  
      border-top: 100px solid #400526;  
      border-left: 100px solid transparent;  
    }  
    #BottomLeftTriangle {  
     width: 0px;  
     height: 0px;  
     margin: 10px 10px;  
     float: left;  
     border-bottom: 100px solid #600ffe;  
     border-right: 100px solid transparent;  
    }  
    #BottomRightTriangle {  
     width: 0px;  
     height: 0px;  
     margin: 10px 10px;  
     float: left;  
     border-bottom: 100px solid #ff7578;  
     border-left: 100px solid transparent;  
    }  
  
    #Burst8 {  
     width: 80px;  
     height: 80px;  
     margin: 10px 10px;  
     float: left;  
     background-color: #cf7668;  
     position: relative;  
     transform:rotate(20deg);  
     -webkit-transform:rotate(20deg);  
     -ms-transform:rotate(20deg);  
     -moz-transform:rotate(20deg);  
     -o-transform:rotate(20deg);  
    }  
    #Burst8:before{  
     width: 80px;  
     height: 80px;  
     top: 0;  
     left: 0;  
     background-color: #cf7668;  
     position: absolute;  
     content: "";  
     transform:rotate(135deg);  
     -webkit-transform:rotate(135deg);  
     -ms-transform:rotate(135deg);  
     -moz-transform:rotate(135deg);  
     -o-transform:rotate(135deg);  
    }  
  
    #Burst12 {  
      width: 80px;  
      height: 80px;  
      margin: 20px 20px;  
      float: left;  
      background-color: #a8ff26;  
      position: relative;  
      text-align: center;  
    }  
    #Burst12:before, #Burst12:after{  
      width: 80px;  
      height: 80px;  
      top: 0;  
      left: 0;  
      background-color: #a8ff26;  
      position: absolute;  
      content: "";  
    }  
    #Burst12:before{  
      transform:rotate(30deg);  
      -webkit-transform:rotate(30deg);  
      -ms-transform:rotate(30deg);  
      -moz-transform:rotate(30deg);  
      -o-transform:rotate(30deg);  
    }  
    #Burst12:after{  
      transform:rotate(60deg);  
      -webkit-transform:rotate(60deg);  
      -ms-transform:rotate(60deg);  
      -moz-transform:rotate(60deg);  
      -o-transform:rotate(60deg);  
    }  
  </style>  
</head>  
<body>  
  <!-- 圓形：設置寬度和高度相等，border-radius屬性爲寬度或高度的一半 -->  
  <div id="Circle"></div>  
  <!-- 橢圓形：圓形的變體，高度設置爲寬度的一半，border-radius屬性爲高度除以高度一半 -->  
  <div id="Oval"></div>  
  <!-- 三角形：寬度和高度設置爲0，border設置左，右邊透明，底邊可見Solid -->  
  <div id="Triangle"></div>  
  <!-- 倒三角形：寬度和高度設置爲0，border設置左，右邊透明，頂邊可見Solid -->  
  <div id="InvertedTriangle"></div>  
  <!-- 左三角形：寬度和高度設置爲0，border設置上，下邊透明，右邊可見Solid -->  
  <div id="LeftTriangle"></div>  
  <!-- 右三角形：寬度和高度設置爲0，border設置上，下邊透明，左邊可見Solid -->  
  <div id="RightTriangle"></div>  
  <!-- 菱形：使用transform和rotate相結合，使兩個正反三角形上下顯示 -->  
  <div id="Diamond"></div>  
  <!-- 梯形：三角形的變體，設置左右兩條邊相等，而且給它設置一個寬度 -->  
  <div id="Trapezium"></div>  
  <!-- 長方形：寬比高長 -->  
  <div id="Rectangle"></div>  
  
  <!-- 浮動Div換行 -->  
  <div style="clear:both">  
  <!-- 正方形：寬和高相等 -->  
  <div id="Square"></div>  
  <!-- 圓環：在圓形的基礎上設置邊界，邊界顏色與圓形填充顏色不一樣 -->  
  <div id="Ring"></div>  
  <!-- 平行四邊形：使用transform使長方形傾斜一個角度 -->  
  <div id="Parallelogram"></div>  
  <!-- 五角星：星形的實現方式比較複雜，主要是使用transform屬性來旋轉不一樣的邊 -->  
  <div id="FiveStar"></div>  
  <!-- 六角星：使用transform屬性來旋轉不一樣的邊 -->  
  <div id="SixStar"></div>  
  <!-- 五邊形：能夠採用三角形和梯形組合 -->  
  <div id="Pentagon"></div>  
  <!-- 六邊形：在長方形上面和下面各放置一個三角形 -->  
  <div id="Hexagon"></div>  
  <!-- 八邊形：在長方形上面和下面各放置一個梯形 -->  
  <div id="Octagon"></div>  
  <!-- 心形：心形的製做是很是複雜的，能夠使用僞元素來製做，分別將僞元素旋轉不一樣的角度，並修改transform-origin屬性來設置元素的旋轉中心點 -->  
  <div id="Heart"></div>  
  
  <!-- 浮動Div換行 -->  
  <div style="clear:both">  
  <!-- 蛋形：橢圓形的變體，高度比寬度稍大，設置正確的border-radius屬性 -->  
  <div id="Egg"></div>  
  <!-- 無窮符號：經過border屬性和設置僞元素的角度來實現 -->  
  <div id="Infinity"></div>  
  <!-- 消息提示框：一個圓角矩形加左邊中間的一個小三角形 -->  
  <div id="CommentBubble"></div>  
  <!-- 鑽石：上面一個梯形，下面一個三角形組成 -->  
  <div id="Diamonds"></div>  
  <!-- 八卦圖：多個圓形的組合-->  
  <div id="EightDiagrams"></div>  
  <!-- 食豆人：設置border和border-top-left-radius，border-bottom-right-radius等屬性-->  
  <div id="PacMan"></div>  
  <!-- 扇形：在三角形的基礎上，讓其中一邊成弧形 -->  
  <div id="Sector"></div>  
  <!-- 月牙：由兩條弧線組成的，每一個弧線能夠當作一個圓的一部分弧長，在圓的基礎上讓圓有一個陰影能夠造成一個月牙 -->  
  <div id="CrescentMoon"></div>  
  
  <!-- 浮動Div換行 -->  
  <div style="clear:both">  
  <!-- 頂左直角三角形 -->  
  <div id="TopLeftTriangle"></div>  
  <!-- 頂右直角三角形 -->  
  <div id="TopRightTriangle"></div>  
  <!-- 底左直角三角形 -->  
  <div id="BottomLeftTriangle"></div>  
  <!-- 底右直角三角形 -->  
  <div id="BottomRightTriangle"></div>  
  <!-- 八角形 -->  
  <div id="Burst8"></div>  
  <!-- 十二角形 -->  
  <div id="Burst12"></div>  
</body>  
</html>