上一小節(jié)給大家分享了平行四邊形的實(shí)現(xiàn)方法，此時(shí)我們來(lái)說(shuō)一下切角效果的實(shí)現(xiàn)方法。

實(shí)現(xiàn)切角效果需要掌握的幾個(gè)點(diǎn)包括：css漸變、background-size、條紋背景

直角切角

先實(shí)現(xiàn)一個(gè)簡(jiǎn)單的，比如讓一個(gè)矩形，右下角切掉。實(shí)現(xiàn)該功能可以使用強(qiáng)大的漸變功能，有了漸變基礎(chǔ)，應(yīng)該不難理解。

注：background: #58a不是必須的，加上它是為了將其作為回退機(jī)制。

實(shí)現(xiàn)兩個(gè)切角，左右下角各一個(gè)。一層漸變肯定不行，需要兩層。按想法一步步實(shí)現(xiàn)，首先可能會(huì)這樣寫(xiě)，想學(xué)習(xí)更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干貨。

可以看到，效果并沒(méi)有實(shí)現(xiàn)，原因是兩層漸變都會(huì)填滿(mǎn)整個(gè)元素，因此它們會(huì)相互覆蓋。需要讓它們縮小一點(diǎn)，使用background-size讓每層漸變分別只占據(jù)整個(gè)元素的一半。

依然沒(méi)有達(dá)到效果，這是因?yàn)闆](méi)有添加background-repeat屬性，因而每層漸變圖案各自平鋪了兩次。

好了，現(xiàn)在實(shí)現(xiàn)了。如果要四個(gè)角的話，就要四層漸變了。

就這樣一個(gè)切角效果就實(shí)現(xiàn)了，后還會(huì)補(bǔ)充更多多邊形效果，大家多多支持，多多鼓勵(lì)！