純css構(gòu)造多邊形div

3fuyu 發(fā)布于2019-08-29 11:01 / 3371人閱讀

摘要：設(shè)計(jì)師畫(huà)的方案里有如下的圖形如果只是一個(gè)簡(jiǎn)單的五邊形，可以用去做。所以一共是這么層形狀差不多的五邊形。第一步，先用畫(huà)出五邊形。正確的做法是使用然后，因?yàn)槲覀冃枰还彩莻€(gè)多邊形，所以還需要增加一個(gè)，一個(gè)偽元素。

設(shè)計(jì)師畫(huà)的方案里有如下的圖形：

如果只是一個(gè)簡(jiǎn)單的五邊形，可以用css shape去做。仔細(xì)分析圖形，發(fā)現(xiàn)它實(shí)際上是3個(gè)五邊形的疊加：1. 最外面一層淺藍(lán)色的稍大一些，2. 中間一層深藍(lán)色顏色和背景相同，但尺寸略小，蓋在下面那層上，由此而產(chǎn)生了一個(gè)邊框的效果，3. 最里面的五邊形顏色最深。所以一共是這么3層形狀差不多的五邊形。

我最開(kāi)始的想法是先畫(huà)一個(gè)深藍(lán)色的矩形，然后用背景色做一個(gè)小三角形蓋在右下角就可以了。也確實(shí)實(shí)現(xiàn)了，但是畫(huà)不出邊框來(lái)了，感覺(jué)不夠完美。

最后還是決定用稍微麻煩一些的clip path去實(shí)現(xiàn)。

第一步，先用clip path畫(huà)出五邊形。為了簡(jiǎn)單起見(jiàn)，找一個(gè)網(wǎng)站先把路徑畫(huà)出來(lái)。左下角的代碼是這樣的：

-webkit-clip-path: polygon(74px 64px,70px 313px,248px 315px,311px 240px,309px 52px);

因?yàn)槲覀兊膱D形畫(huà)的不規(guī)整，所以數(shù)字比較奇怪，把它整理的整齊一些：

-webkit-clip-path: polygon(70px 70px,70px 315px,240px 315px,315px 240px,315px 70px);

調(diào)整為以0為起點(diǎn)：

-webkit-clip-path: polygon(0px 0px,0px 315px,240px 315px,315px 240px,315px 0px);

再調(diào)整為百分比：

-webkit-clip-path: polygon(0% 0%,0% 100%,240px 100%,100% 240px,100% 0%);

在這里240px不能直接變?yōu)榘俜直龋駝t圖像會(huì)失真。正確的做法是使用calc:

-webkit-clip-path: polygon(100% 0%,100% calc(100% - 20px),calc(100% - 20px) 100%,0px 100%,0% 0%);

然后，因?yàn)槲覀冃枰还彩?個(gè)多邊形，所以還需要增加一個(gè)before，一個(gè)after偽元素。最后的完整代碼就是這樣的：

html部分：


    內(nèi)容內(nèi)容內(nèi)容

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%);
}