這次帶給大家CSS做出圖片背景填充的六邊形,CSS做出圖片背景填充的六邊形的注意事項有哪些,下面就是實戰案例,一起來看一下。
六邊形的實現原理其實就是透過旋轉三個重疊的矩形得到的,如下圖所示:
這裡為了得到一個正的六邊形,兩個矩形旋轉的角度必須為-60deg和60deg,以及矩形高寬比必須是Math.sqrt(3) : 1
那麼首先我們要建立三個矩形:
<p class="hexagon"> <p class="hexagonitem hexagonitem_left"></p> <p class="hexagonitem hexagonitem_center"></p> <p class="hexagonitem hexagonitem_right"></p> </p>
我們設定三個矩形的寬高分別為60px和104px,背景色為藍色,.hexagonitem_left旋轉-60deg,.hexagonitem_right旋轉60deg,.hexagonitem_center不旋轉。
.hexagon { width: 60px; height: 104px; position: relative; margin: 200px auto; } .hexagonitem { width: 100%; height: 100%; background: blue; position: absolute; top: 0; left: 0; } .hexagonitem_left { transform: rotate(-60deg); } .hexagonitem_right { transform: rotate(60deg); }
這樣就簡單的得到了一個正六邊形。
那麼我們要如何才能使得藍色背景變成圖片呢,其實也很簡單,上述的三個矩形其實只是起到了一個塑形的作用,實際上是應該設置為visibility : hidden 的,我們需要為三個矩形分別添加一個矩形的子元素並且設定為visibility: visible 。
三個子元素的寬高需要剛好能覆蓋之前的藍色六邊形。
做好程式碼如下,大家可以好好研究一下
Document <p class="hexagon"> <p class="hexagonitem hexagonitem_left"></p> <p class="hexagonitem hexagonitem_center"></p> <p class="hexagonitem hexagonitem_right"></p> </p>
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是CSS做出圖片背景填滿的六邊形的詳細內容。更多資訊請關注PHP中文網其他相關文章!