說下兩種css 制作正六邊形的方法。
先看一下結(jié)果：
在之前要先了解一下正六邊形內(nèi)角和邊的關(guān)系，正六邊形的每個內(nèi)角是60deg，如圖（√3其實是根號3）：
方法一：原理把正六邊形分成三部分，左中右分別是：before部分，div部分，after部分，如圖：
before三角形部分是div的before偽元素，after三角形部分是div的after偽元素。
html代碼：
<div class='div'></div>
css代碼：
.div { position: relative; width: 50px; height: 86.6px; margin: 50px auto; background-color: red; } .div:before { content: ''; display: block; position: absolute; width: 0; height: 0; right:50px; border-width: 43.3px 25px; border-style: solid; border-color: transparent red transparent transparent; } .div:after { content: ''; display: block; position: absolute; width: 0; height: 0; left:50px; border-width: 43.3px 25px; border-style: solid; border-color: transparent transparent transparent red; top:0; }注意div及偽元素的寬高需要根據(jù)上面的公式計算。
方法二：也是把正六邊形分成三個寬高相同的div，然后使用定位以及css3 transform:rotate分別向左右旋轉(zhuǎn)60deg形成正六邊形，如圖：
html代碼：
<div class='div-2'> <div class='one'></div> <div class='two'></div> <div class='three'></div></div>
css代碼:
.one { width: 50px; height: 86.6px; margin: 0 auto; border-top: 1px solid red; border-bottom: 1px solid red; } .two { position: absolute; width: 50px; height: 86.6px; left: 25px; top: 0; transform: translate(-50%,-50%); transform: rotate(60deg); border-top: 1px solid red; border-bottom: 1px solid red; } .three { position: absolute; width: 50px; height: 86.6px; left: 25px; top: 0; transform: translate(-50%,-50%); transform: rotate(300deg); border-top: 1px solid red; border-bottom: 1px solid red; }以上兩種方法，元素的寬高尺寸以及左右位移需要根據(jù)上面的公式計算不能隨意填寫。
總結(jié)
以上所述是小編給大家介紹的css畫正六邊形的兩種方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
