教你怎樣用純css構造多邊形div
如果只是一個簡單的五邊形，可以用css shape去做。仔細分析圖形，發現它實際上是3個五邊形的疊加：1. 最外面一層淺藍色的稍大一些，2. 中間一層深藍色顏色和背景相同，但尺寸略小，蓋在下面那層上，由此而產生了一個邊框的效果，3. 最里面的五邊形顏色最深。所以一共是這么3層形狀差不多的五邊形。
我最開始的想法是先畫一個深藍色的矩形，然后用背景色做一個小三角形蓋在右下角就可以了。也確實實現了，但是畫不出邊框來了，感覺不夠完美。
最后還是決定用稍微麻煩一些的clip path去實現。
第一步，先用clip path畫出五邊形。為了簡單起見，找 一個網站 先把路徑畫出來。左下角的代碼是這樣的：
-webkit-clip-path: polygon(74px 64px,70px 313px,248px 315px,311px 240px,309px 52px);
因為我們的圖形畫的不規整，所以數字比較奇怪，把它整理的整齊一些：
-webkit-clip-path: polygon(70px 70px,70px 315px,240px 315px,315px 240px,315px 70px);
調整為以0為起點：
-webkit-clip-path: polygon(0px 0px,0px 315px,240px 315px,315px 240px,315px 0px);
再調整為百分比：
-webkit-clip-path: polygon(0% 0%,0% 100%,240px 100%,100% 240px,100% 0%);
在這里240px不能直接變為百分比，否則圖像會失真。正確的做法是使用calc:
-webkit-clip-path: polygon(100% 0%,100% calc(100% - 20px),calc(100% - 20px) 100%,0px 100%,0% 0%);
然后，因為我們需要一共是3個多邊形，所以還需要增加一個before，一個after偽元素。最后的完整代碼就是這樣的：
html部分：
<div class="aboutus-event-polygon"> <div class="polygon-content">內容內容內容</div> </div>
css部分：
.polygon-content { background-color: #184284; padding: 5px; position: relative; z-index: 300; -webkit-clip-path: polygon(100% 0%,100% calc(100% - 20px),calc(100% - 20px) 100%,0px 100%,0% 0%); } .aboutus-event-polygon:before { background-color: #006ec8; content: ''; height: 100%; left: 10px; position: absolute; top: 10px; width: 100%; z-index: 200; -webkit-clip-path: polygon(100% 0%,100% calc(100% - 20px),calc(100% - 20px) 100%,0px 100%,0% 0%); } .aboutus-event-polygon:after { background-color: #2b9bd7; content: ''; height: calc(100% + 4px); left: 12px; position: absolute; top: 8px; width: 100%; z-index: 100; -webkit-clip-path: polygon(100% 0%,100% calc(100% - 22px),calc(100% - 22px) calc(100% + 2px),0px calc(100% + 2px),0% 0%); }
本文轉載自網絡。
