css寫的一些切角效果
<a >查看圖片代碼</a>
這4個(gè)效果都是利用漸變屬性實(shí)現(xiàn)的建钥，漸變可以接受一個(gè)角度作為方向，且色標(biāo)的位置信息也可以是絕對的長度值，不受容器尺寸的影響。
它們的HTML只需要一個(gè)<div>容器：
<div class="cut>
</div>
效果1
只需要一個(gè)從右下角往左上角的線性漸變，并且前15px的長度值設(shè)置為透明，就可以完成一個(gè)切角历葛。
background:#ace;
background:linear-gradient(-45deg, transparent 15px, #ace 0);
實(shí)際上，background:#ace;不是必須的嘀略，加上它是作為回退機(jī)制：如果某些瀏覽器不支持css漸變恤溶，那第二行聲明會被丟棄，而此時(shí)帜羊，至少能得到一個(gè)簡單的實(shí)色背景咒程。
效果2
要切掉兩個(gè)角，明顯一個(gè)漸變是不能實(shí)現(xiàn)的讼育。因此要加一層孵坚。
background:#ace;
background:linear-gradient(-45deg, transparent 15px, #ace 0) right,
linear-gradient(45deg, transparent 15px, #F8E2EB 0) left;
background-size: 50% 100%;
而如果直接把兩層都寫在css里，只能切掉一個(gè)角窥淆，因?yàn)檫@兩層漸變都是填滿整個(gè)元素。因此它們會相互覆蓋巍杈，因此要讓它們都縮小一點(diǎn)忧饭，每個(gè)漸變在水平方向上都各自占據(jù)元素的50%。
但是到目前為止它們的顯示效果卻是這樣的：
為了能夠更好的觀察切角效果筷畦，我把其中一個(gè)顏色改成了粉色
原因是：忘記把
background-repeat關(guān)掉了词裤，因此每層漸變圖案各自平鋪了兩次刺洒。代碼仍需要改進(jìn)：
background:linear-gradient(-45deg, transparent 15px, #ace 0) right,
linear-gradient(45deg, transparent 15px, #F8E2EB 0) left;
background-size: 50% 100%;
background-repeat:no-repeat;
最終效果
效果3
只要按照上面介紹的方法，可以很方便的做出切掉四個(gè)角的效果吼砂，只要四層漸變就可以了：
background:#ace;
background:linear-gradient(135deg, transparent 15px, #F8E2EB 0) top left,
linear-gradient(-135deg, transparent 15px, #ace 0) top right,
linear-gradient(-45deg, transparent 15px, #F8E2EB 0) bottom right,
linear-gradient(45deg, transparent 15px, #ace 0) bottom left;
background-size:50% 50%; /*每個(gè)塊在水平和垂直方向上都占元素尺寸的50%*/
background-repeat:no-repeat;
效果4
當(dāng)我們用徑向漸變代替線性漸變逆航，就可以做出“內(nèi)凹圓角”的效果。
background:#ace;
background:radial-gradient(circle at top left, transparent 15px, #F8E2EB 0) top left,
radial-gradient(circle at top right, transparent 15px, #ace 0) top right,
radial-gradient(circle at bottom right, transparent 15px, #F8E2EB 0) bottom right,
radial-gradient(circle at bottom left, transparent 15px, #ace 0) bottom left;
background-size:50% 50%;
background-repeat:no-repeat;
漸變的方案是行之有效的渔肩，但是也存在一些問題：
- 代碼繁瑣冗長因俐，修改切角尺寸或者改變顏色的時(shí)候，需要修改4處周偎。
- 它太繁瑣以致與我們不能讓各個(gè)切角的尺寸以動畫的方式發(fā)生變化抹剩。
我們還可以采用其他的方法來寫，比如：border-image蓉坎，并通過一個(gè)內(nèi)聯(lián)的SVG圖像來產(chǎn)生切角效果澳眷。
參考書籍：Lea Verou《CSS揭秘》
