真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

CSS怎么實(shí)現(xiàn)圖片背景填充的六邊形-創(chuàng)新互聯(lián)

小編給大家分享一下CSS怎么實(shí)現(xiàn)圖片背景填充的六邊形，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括南潯網(wǎng)站建設(shè)、南潯網(wǎng)站制作、南潯網(wǎng)頁制作以及南潯網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，南潯網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到南潯省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

六邊形的實(shí)現(xiàn)原理其實(shí)就是通過旋轉(zhuǎn)三個重疊的矩形得到的，如下圖所示：

這里為了得到一個正的六邊形，兩個矩形旋轉(zhuǎn)的角度必須為-60deg和60deg，以及矩形高寬比必須是Math.sqrt(3) : 1

那么首先我們要創(chuàng)建三個矩形：

我們設(shè)定三個矩形的寬高分別為60px和104px，背景色為藍(lán)色，.hexagon__item_left旋轉(zhuǎn)-60deg，.hexagon__item_right旋轉(zhuǎn)60deg，.hexagon__item_center不旋轉(zhuǎn)。

.hexagon { width: 60px; height: 104px; position: relative; margin: 200px auto; } .hexagon__item { width: 100%; height: 100%; background: blue; position: absolute; top: 0; left: 0; } .hexagon__item_left { transform: rotate(-60deg); } .hexagon__item_right { transform: rotate(60deg); }

這樣就簡單的得到了一個正六邊形。

那么我們要如何才能使得藍(lán)色背景變成圖片呢，其實(shí)也很簡單，上述的三個矩形其實(shí)只是起到了一個塑形的作用，實(shí)際上是應(yīng)該設(shè)置為 visibility: hidden 的，我們需要給三個矩形分別添加一個矩形的子元素并且設(shè)置為 visibility: visible 。

三個子元素的寬高需要正好能覆蓋之前的藍(lán)色六邊形。

做好代碼如下，大家可以好好研究一下