小編給大家分享一下用css畫正六邊形的方法,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
成都創(chuàng)新互聯(lián)長期為1000+客戶提供的網(wǎng)站建設服務,團隊從業(yè)經(jīng)驗10年,關注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務;打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為南部企業(yè)提供專業(yè)的成都網(wǎng)站建設、做網(wǎng)站,南部網(wǎng)站改版等技術服務。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
在之前要先了解一下正六邊形內(nèi)角和邊的關系,正六邊形的每個內(nèi)角是60deg,如圖(√3其實是根號3):
方法一:原理把正六邊形分成三部分,左中右分別是:before部分,div部分,after部分,如圖:
before三角形部分是div的before偽元素,after三角形部分是div的after偽元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用css畫正六邊形</title> <style type="text/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; } </style> </head> <body> <div class='div'></div> </body> </html>
效果圖:
注意div及偽元素的寬高需要根據(jù)上面的公式計算。
方法二:也是把正六邊形分成三個寬高相同的div,然后使用定位以及css3 transform:rotate分別向左右旋轉(zhuǎn)60deg形成正六邊形,如圖:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用css畫正六邊形</title> <style type="text/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; } </style> </head> <body> <div style='position:relative;width:100px;margin:0 auto;'> <div class='one'></div> <div class='two'></div> <div class='three'></div> </div> </body> </html>
效果圖:
看完了這篇文章,相信你對用css畫正六邊形的方法有了一定的了解,想了解更多相關知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
新聞名稱:用css畫正六邊形的方法
轉(zhuǎn)載來源:http://bm7419.com/article0/gejhio.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供Google、網(wǎng)站設計、響應式網(wǎng)站、做網(wǎng)站、網(wǎng)站建設、網(wǎng)站維護
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)