問(wèn)題
我們?cè)趯?xiě)前端頁(yè)面過(guò)程總，會(huì)碰到這種情況，UCD給的一個(gè)帶切角的背景給我們當(dāng)一個(gè)模塊的背景，然后這個(gè)模塊的寬高又都不是固定的，這種情況下，如果改變模塊的大小零蓉，切角的角度就會(huì)發(fā)生變化笤受，如下圖所示（原圖切角為45度）：
本來(lái)是45度的切角，經(jīng)過(guò)減少模塊的高度后敌蜂，切角變成了上圖的模樣
三明治解決方案
一般碰到這種情況箩兽，如果模塊的寬度不變，只有高度變化的話章喉，我們會(huì)將該模塊的背景變成一種上中下三層的結(jié)構(gòu)汗贫，上下兩層帶角度的背景高度不變身坐，中間層高度可變，這樣就解決了了模塊在高度變化的時(shí)候落包，上下切角可以不受影響的問(wèn)題：
這種方案雖然可以解決問(wèn)題部蛇，但是寫(xiě)法復(fù)雜，需要寫(xiě)額外的dom元素和樣式
linear-gradient解決方案
這種解決方案的原理是通過(guò)角度漸變實(shí)現(xiàn)咐蝇，將漸變的開(kāi)始部分設(shè)置為透明涯鲁。通過(guò)設(shè)置背景圖4個(gè)方向的漸變實(shí)時(shí)切角，通過(guò)這種方式保持45度的角度不改變有序，關(guān)鍵css樣式如下：
background:linear-gradient(-45deg,transparent 45px, #000 0) bottom right,
linear-gradient(45deg,transparent 45px, #000 0) bottom left,
linear-gradient(135deg,transparent 45px, #000 0) top left,
linear-gradient(-135deg,transparent 45px,#000 0) top right;
background-size: 50% 50%;
background-repeat: no-repeat;
效果如下：
這種方案可以很方便的調(diào)節(jié)切角的大小抹腿，切角的角度，而且在寬高均變化的時(shí)候都可以做到固定的切角旭寿，十分好用警绩；不足：背景只能是純色或漸變色，無(wú)法對(duì)圖片進(jìn)行切角
clip-path解決方案
clip-path翻譯過(guò)來(lái)就是剪切路徑盅称，從字面就能看出這個(gè)屬性的作用肩祥，我們可以通過(guò)這個(gè)屬性，自定義裁剪出圖形的可視區(qū)域微渠，通過(guò)該屬性裁剪切角的關(guān)鍵代碼：
background: url(./back2.png) no-repeat;
background-size:100% 100%;
clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
效果如下：
這種方案應(yīng)該算最優(yōu)的方案搭幻，無(wú)論是怎么樣的切角都可以實(shí)現(xiàn)，并且寬高的改變也不會(huì)影響切角的效果
clip-path除了能實(shí)現(xiàn)各種各樣的剪切逞盆，還能配合transition實(shí)現(xiàn)圖片漸變
