css繪制六邊形


CSS id選擇器實現 正六邊形

用css繪制六邊形需要使用到三個容器,分別用於繪制六邊形的三個部分,如下圖所示:

HTML代碼:

1 <div id="box1"></div>
2 <div id="box2"></div>
3 <div id="box3"></div> 

CSS代碼:

 #box1{width:0;border-left: 52px solid transparent;border-right: 52px solid transparent;border-bottom: 30px solid #6c6;    }
    #box2{width: 104px;height: 60px;background-color: #6c6;}
    #box3{width:0;border-top: 30px solid #6c6;border-left: 52px solid transparent;border-right: 52px solid transparent;}

 

 

CSS代碼:

 

1 #box4{width:0;border-right: 30px solid #6c6;border-top: 52px solid transparent;border-bottom: 52px solid transparent;float: left;}
2 #box5{width: 60px;height: 104px;background-color: #6c6;float: left;}
3 #box6{width:0;border-left: 30px solid #6c6;border-top: 52px solid transparent;border-bottom: 52px solid transparent;float: left;}

HTML代碼:

1 <div id="box1"></div>
2 <div id="box2"></div>
3 <div id="box3"></div> 

 

CSS3 為元素實現:

 

 1 #hexagon {
 2     width: 100px;
 3     height: 55px;
 4     background: red;
 5     position: relative;
 6 }
 7 #hexagon:before {
 8     content: "";
 9     position: absolute;
10     top: -25px;
11     left: 0;
12     width: 0;
13     height: 0;
14     border-left: 50px solid transparent;
15     border-right: 50px solid transparent;
16     border-bottom: 25px solid red;
17 }
18 #hexagon:after {
19     content: "";
20     position: absolute;
21     bottom: -25px;
22     left: 0;
23     width: 0;
24     height: 0;
25     border-left: 50px solid transparent;
26     border-right: 50px solid transparent;
27     border-top: 25px solid red;
28 }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM