CSS繪製五角星_CSS/HTML

1 六角形

a style="CURSOR:pointer" data="99029" class="copybut" id="copybut99029" onclick="doCopy('code99029')"><u>複製程式碼</u> 代碼如下：

#star-6 {
    寬度: 0;
    高度: 0;
    b-left: 50 像素純透明；
    右邊框：50 像素純透明；
    下邊框：100 像素純紅色；
    位置：相對；
}
#star-6:after {
寬度: 0;
    高度: 0;
    左邊框: 50 像素純透明;
    右邊框: 50 像素純透明;
    上邊框: 100 像素純透明;
    上邊框: 100 像素絕對;
    內容：""；
    上方：30px;
    左側：-50px;
}

2 個五角星

<u>複製程式碼</u> span > 程式碼如下：

#star- Five {
   邊距：50px 0;
   位置：相對；
   顯示：區塊；
   位置：相對；
   顯示：區塊；
 ;
   寬度：0px；
   高度：0px；
   右框：100px純透明；
   下邊框：70px左側純紅色；
 1 -transform:    旋轉(35deg);
   -webkit-transform: 旋轉(35deg);
   -ms-transform:     旋轉(35deg);
  }
#star- Five:before {
   下邊框：80 像素純紅色；
   左邊框：30 像素純透明；
   右邊框：30 像素純透明；
   位置：絕對絕對;
   高度：0；
   寬度：0；
   頂部：-45px；
   左：-65px；
   顯示：區塊；
   webkit-transform: 旋轉(-35deg);
   -moz-transform:    旋轉(-35deg);
   -ms-transform:     );

}
#star- Five:after {
   位置：絕對；
   顯示：區塊；
   顏色：紅色；
   上方：3px;左：-105px；
   寬度：0px；
   高度：0px；
   右邊框：100像素純透明；
   下邊框：70像素純紅色；
  ;
   -webkit-transform: 旋轉(-70deg);
   -moz-transform:    旋轉(-70deg);
   -ms-transform -  旋轉(-70deg);
   -ms-transform -  旋轉(-70de轉(-70deg);
   內容：'';
}

3 五邊形

<u>複製程式碼</u> span> 程式碼如下：

#pentagon {
    位置：相對；
    寬度：54px;
    邊框寬度：50px 18px 0;
  ;
    邊框顏色: 紅色透明;
}
#pentagon:before {
    內容: "";
    位置: 絕對;
  ;
    上方: -85px;
    左: -18px;
    邊框寬度: 0 45px 35px;
   BR>

4 個六邊形

<u>複製程式碼</u>代碼如下：

#hexagon {
   寬: 100px;
     高度: 55px;
    
位置：相對；
}
#hexagon：之前{
    內容："；
    位置：絕對；
    上方：-25px;
    左：0; BR>    寬度: 0;
    高度: 0;
    左邊框框: 50px 純色透明;
    右框: 50px 純色透明;

    右框: 50px 純色透明;

    右框: 50px 純色透明;
 #hexagon:after {
    內容：""；
    位置：絕對；
    底部：-25px;
    左：0 BR>    左邊框：50 像素純透明；
    右邊框：50 像素純透明；
    上邊框：25 像素純紅色；
}

5份貨件

<u>複製程式碼</u>程式碼如下：

#octagon {
    寬度：100px;
    高度：100px;
    背景：紅色；
 }

#octagon:before {
    內容：""；
    位置：絕對；
    上方：0；
    ;
    左邊框： 29 像素實心#eee;
    左框: 29 像素實心#eee;
    右框: 29 像素實心#eee;
    寬度: 42 像素;
  #octagon:after {
    內容：「」；
    位置：絕對；
    底部：0；
    左：0；
    右邊框：29 像素實心#eee；
    寬度：42 像素；
    高度：0；
}

>

6心型

<u>複製程式碼</u> 程式碼如下：

#heart {
    位置：相對；
    寬度：100 像素；
    高度：90 像素；
}
# heart：之前，
#heart:after {
    位置：絕對；
    內容物：""；
    左：50px;
    上方：0;
 左：50px;
    上方：0;
 . >    高度: 80px;
    背景：紅色;
    -moz-border-radius: 50px 50px 0 0;
    邊框半徑: 50px 50px 0 0;
    -webkit-transform: 旋轉(-45deg ) ;
       -moz-變換：旋轉(-45度);
        -ms-變：旋轉(-45度);
     變換：旋轉(-45度);
           轉化：旋轉( -45deg);
    -webkit-transform-origin: 0 100%;
   -webkit-trans ): 0 100%;
 >        -ms-transform-origin: 0 100%;
         - o-transform-origin: 0 100%;
after {    left: 0;
    -webkit-transform:rotate( 45deg);
       -moz-trans      -o -transform: 旋轉(45deg);
            transform: 旋轉(45deg) );
    -webkit-transform-origin: 100% 10%;
        -ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
      div>