> 原文出處：http://www.w3cplus.com/css3/css-secrets/cutout-corners.html
## 問題
斜切角在Web設計和印刷中是相當受歡迎的樣式。它通常是在一個或多個元素的角落切一個`45°`的角（也就是所謂的斜切角）。特別是最近，扁平化設計的勢頭壓過了擬真設計，也使這種效果更加流行。當斜切角只存在元素的一側，并且每個都占據元素的`50%`高度的時候，一個箭頭的形狀產生了，這在按鈕和面包屑導航中非常受歡迎。
*圖注：帶斜切角的按鈕，創建了箭頭形狀強調其意義*
但是，要用CSS來創建這個效果并不是那么容易，這不是一行代碼就可以搞定的效果。這導致很多作者傾向于直接使用背景圖像完成，而不是結合三角形來完成斜切角（當背景是純色），也不會去使用一個或多個角落已經被切的圖像來作為整個背景。
*圖注：應用了斜切角的網站示例（半透明的“Find & Book”盒子的左下角）*
這種方法顯然是不靈活的，而且難以維護，還增加了延遲，因為增加了HTTP請求和網站的總文件大小。有沒有什么更好的方法呢？
## 解決方案
第一個解決方案是萬能的CSS漸變。我們假設我們暫時只完成一個斜切角——右下角那個。其訣竅在于漸變可以接受一個角度值作為參數（如`45deg`），色標位置是絕對長度，這兩個都不會因為元素和背景尺寸的改變受到影響。
綜上所述，我們只需要一個線性漸變就ok了。它需要一個透明的色標作為斜切角，還有另一個相同位置的帶有我們想要作為背景顏色的色標。CSS代碼如下（如一個`15px`大小的切角）：
~~~
background: #58a;
background: linear-gradient(-45deg, transparent 15px, #58a 0);
~~~
很簡單，對不對？你可以看到結果。
*圖注：右下角斜切的元素，通過一個簡單的CSS漸變完成*
從技術上說，我們甚至不需要第一條聲明。我們只是把它作為一個降級引入：當CSS漸變不被支持時，也就是第二條聲明失效的時候。所以我們還是需要一個純色背景。
> 為方便調試，我們使用不同的顏色（`#58a`和`#655`）。在應用中，兩個漸變應該是相同的顏色。
現在，假設我們需要兩個斜切角，左右下角分別一個。只用一個漸變是沒辦法搞定的，所以兩個漸變上場。我們首先想到的可能是：
~~~
background: #58a;
background: linear-gradient(-45deg, transparent 15px, #58a 0),
linear-gradient(45deg, transparent 15px, #655 0);
~~~
但是，如下圖所示，這是不ok的。
*圖注：給底部兩個角都應用斜切角效果的失敗嘗試*
默認情況下，兩個漸變被應用于同一個元素，它們會相愛相殺（彼此掩蓋）。我們需要把它們變小，通過使用`background-size`來讓每個漸變都只應用于元素的一半：
~~~
background: #58a;
background: linear-gradient(-45deg, transparent 15px, #58a 0) right,
linear-gradient(45deg, transparent 15px, #655 0) left;
background-size: 50% 100%;
~~~
你可以在下圖中看到結果。
*圖注：只一條`background-size`是不夠噠~*
即使應用了`background-size`，這倆漸變還是會把對方蓋住。因為我們忘了把`background-repeat`關掉了，所以我們的背景就都重復了兩次。因此，我們的背景還是在相愛相殺——這次是因為背景重復。新修改的代碼如下：
~~~
background: #58a;
background: linear-gradient(-45deg, transparent 15px, #58a 0) right,
linear-gradient(45deg, transparent 15px, #655 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;
~~~
你可以在下圖中看到結果。
*圖注：我們的左下和右下斜切角終于ok了*
它終！于！通過驗證了！現在，你應該知道要如何把這個效果應用到其它四個角了吧。一共需要四個漸變，代碼如下：
~~~
background: #58a;
background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
linear-gradient(-135deg, transparent 15px, #655 0) top right,
linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
linear-gradient(45deg, transparent 15px, #655 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
~~~
你可以在下圖中看到結果。
*圖注：使用四個漸變，給四個角都應用了效果*
前面的代碼有個問題是，它不是特別可維護的。要改變背景顏色還有四個角的大小，需要五次編輯。加入預處理器mixin有助于減少重復。這是SCSS代碼：
~~~
@mixin beveled-corners($bg, $tl:0, $tr:$tl, $br:$tl, $bl:$tr) {
background: $bg;
background: linear-gradient(135deg, transparent $tl, $bg 0) top left,
linear-gradient(225deg, transparent $tr, $bg 0) top right,
linear-gradient(-45deg, transparent $br, $bg 0) bottom right,
linear-gradient(45deg, transparent $bl, $bg 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
~~~
然后，在需要的時候，它可以像這樣被使用，使用`2-5`個參數：
~~~
@include beveled-corners(#58a, 15px, 5px);
~~~
在這個示例中，我們將會得到在左上角和右下角得到`15px`斜切角，在左下角和右上角得到`5px`斜切角，和`border-radius`的原理相似。這是因為我們為SCSS的mixin的參數提供了默認值，還有，這些默認值也可以引用其它的參數。
## 曲線切口角
有很多漸變的方法可以用來創建曲線切口角，大家常常把這個效果稱之為“內圓角”，因為它看起來就是圓角的反相版本。和斜切角唯一的不同是它使用了徑向漸變，而不是線性漸變：
[](http://g2geogeske.com/)
> [g2geogeske.com](http://g2geogeske.com/)上使用曲線切口角的非常棒的例子；設計師已經把它們變成核心設計元素，因為它們存在于導航、內容、甚至頁腳中。
~~~
background: #58a;
background: radial-gradient(circle at top left,
transparent 15px, #58a 0) top left,
radial-gradient(circle at top right,
transparent 15px, #58a 0) top right,
radial-gradient(circle at bottom right,
transparent 15px, #58a 0) bottom right,
radial-gradient(circle at bottom left,
transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
~~~
你可以在下圖中看到結果。
*圖注：使用徑向漸變完成的曲線切口角*
和前面的技術一樣，切口角的大小可以通過色標的位置進行控制，使用mixin可以讓代碼更易于維護。
## 內聯SVG、border-image的解決方案
雖然基于漸變的解決方案是可行的，但是它有幾個問題：
* 代碼非常長，而且重復。在通常情況下，我們希望在四個角都有相同尺寸的切口角，這樣我們就需要重復四次編輯。相似的，要修改背景顏色我們也需要四次編輯，五個計算降級。
* 在不同尺寸的切口角之間設置動畫是完全不可能的（依賴于瀏覽器）。
幸好，根據我們的需求，還有幾個我們可以采用的方法。一個是在內聯SVG中使用`border-image`生成圓角。根據[`border-image`](http://www.w3cplus.com/content/css3-border-image)的工作原理，你可以想象一下我們的SVG會如何嗎？
因為尺寸并不重要（`border-image`可以縮放，而且SVG縮放是完美的，不需要擔心尺寸——這就是矢量圖的好處！），單位可以是`1`，或者更直接的，直接是數字。拐角長度可以是長度`1`，直邊長度也為`1`。結果（縮放）如下圖所示。
*圖注：基于SVG的`border-image`，及其切片*
代碼如下：
~~~
border: 15px solid transparent;
border-image: 1 url('data:image/svg+xml,\<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a">\<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\</svg>');
~~~
注意我們使用了大小為`1`的切片。這不是`1`像素的意思，它指的是SVG文件的坐標系（因此缺省單位）。如果我們指定了它的百分比，我們需要的就是`1/3`圖像的近似值，如`33.34%`。近似值是有風險的，因此不是所有的瀏覽器都使用相同的精確度。但是，通過使用SVG文件的坐標系統的單位，我們就不需要糾結精確值的問題了。
*圖注：給`border-image`屬性應用SVG*
結果如上圖所示。我們的切口角有了，但是沒有背景。你可以通過兩個方法解決：指定一個背景，或者給我們的`border-image`聲明添加一個關鍵字`fill`，這樣它就不會丟棄中間的切片。這里，我們選擇指定一個背景，因為這樣也可以作為一個降級。
另外，我們的切口角比前面創建的切口角要小，有點奇怪。我們明明指定了一個`15px`的邊框寬度！這是漸變造成的，`15px`沿著漸變方向的，而方向垂直于梯度。同時邊框的寬度不是對角線測量的，而是水平/垂直方向的。所以你找到原因了嗎？對，我們要再次使用勾股定理，我們在前面也講過。
*圖注：指定`border-width`為`15px`，得到結果為`15 / 根號(2) ≈ 10.606601718`的拐角尺寸，這也是為什么我們的拐角看起來小很多*
上圖有助于我們理解。總而言之，為了得到相同的尺寸，我們使用的邊框應該是我們用漸變方法的尺寸的`根號(2)`倍。這里，應該是`15 * 根號(2) ≈ 21.213203436`像素，也就是約等于`20px`，除非我們真的需要對角線盡可能地接近于`15px`：
~~~
border: 20px solid transparent;
border-image: 1 url('data:image/svg+xml,\<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a">\<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\</svg>');
background: #58a;
~~~
*圖注：我們的切口角哪去了？！*
但是，上圖的效果并不是我們期待的效果。我們辛辛苦苦創建的切口角躲到哪里去了？年輕人，不要擔心！切口角還在那里。如果你把背景設置成其它的顏色，如`#655`，你就會知道是怎么回事了。
*圖注：把我們的`background`換成其它顏色，就可以發現神秘消失的切口角了*
上圖所示，我們的切口角消失的原因是我們指定的背景把它們擋住了。我們需要做的是使用`background-clip`來阻止背景擴展到覆蓋了我們的邊框：
~~~
border: 20px solid transparent;
border-image: 1 url('data:image/svg+xml,\<svg xmlns="http://www.w3.org/2000/svg"\ width="3" height="3" fill="%2358a">\<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\</svg>');
background: #58a;
background-clip: padding-box;
~~~
這個問題已經解決，我們現在的盒子如下圖所示。
但是，我們可以只在一個地方很容易地改變拐角的尺寸：我們只需要修改邊框的寬度。我們甚至可以給它添加動畫，因為`border-width`是可添加動畫的！我們還可以只通過兩次編輯就改變背景。另外，因為我們的背景現在是獨立于拐角效果的，我們甚至可以給它指定一個漸變，或其它的紋理，只要它在邊緣處的顏色還是`#58a`就好。例如，看看下圖，使用了一個從`hsla(0,0%,100%,.2)`到`transparent`的徑向漸變。
*圖注：帶有徑向漸變背景的切口角*
只剩下一個小問題了。如果`border-image`不被支持，降級不僅沒有拐角。因為背景裁剪，它看起來還像是盒子邊緣和內容之間沒有任何填充空間。為了解決這個問題，我們可以給我們的邊框添加一個和背景相同的顏色：
~~~
border: 20px solid #58a;
border-image: 1 url('data:image/svg+xml,\<svg xmlns="http://www.w3.org/2000/svg"\ width="3" height="3" fill="%2358a">\<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\</svg>');
background: #58a;
background-clip: padding-box;
~~~
當`border-image`應用的時候，顏色會被忽略，這可以提供一個更優雅的降級，看起來如圖所示。
因為這個缺陷，使得我們想要改變背景顏色的時候，需要的編輯次數從`2`變成了`3`。
## `clip-path`的解決方案
因為`border-image`的解決方案非常緊湊而且相對DRY，它仍然有其局限性。例如，我們仍然需要有一個純色背景，或一個在邊緣處帶有純色的背景。如果我們想要一種不同的背景呢，例如紋理、圖案，或一個線性漸變？
有一個方法可以使我們不受所有的這些限制，盡管它也有自己的局限性。還記得`clip-path`屬性嗎？一件非常令人驚嘆的事情是，CSS的`clip-path`可以結合百分比（這里指的是元件尺寸）以及絕對長度使用，給了我們極大的靈活性。
例如，`clip-path`裁剪一個帶`20px`（水平方向）切角的矩形元素的代碼如下所示：
~~~
background: #58a;
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
);
~~~
盡管代碼很短，也不意味著它是DRY的，這就是它本身最大的問題之一，如果你不使用預處理器的話。事實上，這是我們提出的最WET的CSS解決方案，要改變拐角尺寸需要`8`次編輯！但是，我們只需要在一處位置改變背景。
它的優勢是我們可以使用任何我們想要的背景，甚至是裁剪像圖片這樣的替換元素。如下圖帶有切角的圖像。
*圖注：通過`clip-path`制作的帶有切角的圖片*
前面的幾種方法都不能完成。另外，`clip-path`是可動畫的，即使斜切角的大小不同，形狀也不同。我們需要做的只是使用一個不同的裁剪路徑。
除了WET，它的瀏覽器支持也不夠，它還有個缺點是：如果沒有提供足夠的`padding`，它還會裁剪文本，因為它只裁剪元素，而不區分都是哪些部分。與此相反，漸變的方法只是讓文本在超出拐角（因為它們只是背景），這樣`border-image`方法只是扮演邊框的角色，來包裹文本。
### 將來的拐角
將來我們不需要再通過CSS漸變、裁剪或SVG來完成這種效果了。一個新屬性，`corner-shape`即將加入到[CSS Backgrounds & Borders Level 4](http://dev.w3.org/csswg/css-backgrounds-4/)中，可以幫我們節省很多精力。它可以和`border-radius`結合使用，用于產生不同切口角效果，在`border-radius`中定義尺寸即可。如，在所有角落指定`15px`的切口角將會很簡單：
~~~
border-radius: 15px;
corner-shape: bevel;
~~~
