摘要：問題斜切角在設計和印刷中是相當受歡迎的樣式。當斜切角只存在元素的一側，并且每個都占據元素的高度的時候，一個箭頭的形狀產生了，這在按鈕和面包屑導航中非常受歡迎。現在，假設我們需要兩個斜切角，左右下角分別一個。

問題

斜切角在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的參數提供了默認值，還有，這些默認值也可以引用其它的參數。

曲線切口角

有很多漸變的方法可以用來創建曲線切口角，大家常常把這個效果稱之為“內圓角”，因為它看起來就是圓角的反相版本。和斜切角唯一的不同是它使用了徑向漸變，而不是線性漸變：

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的工作原理，你可以想象一下我們的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中，可以幫我們節省很多精力。它可以和border-radius結合使用，用于產生不同切口角效果，在border-radius中定義尺寸即可。如，在所有角落指定15px的切口角將會很簡單：

border-radius: 15px;
corner-shape: bevel;

轉載自：http://www.w3cplus.com/css3/css-secrets/cutout-corners.html