說下兩種css 制作正六邊形的方法。
先看一下結(jié)果：
在之前要先了解一下正六邊形內(nèi)角和邊的關(guān)系，正六邊形的每個(gè)內(nèi)角是60deg，如圖（√3其實(shí)是根號(hào)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ù)上面的公式計(jì)算。
方法二：也是把正六邊形分成三個(gè)寬高相同的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; } |
