“你以為你這么低調(diào)我就找不到你了嗎？沒有用的，像你這樣拉風(fēng)的屬性，只要有你在的地方，就好像黑夜中的螢火蟲一樣，那樣的鮮明，那樣的出眾；你那委婉的形狀，奇特的寫法，神乎其技的思路，還有那百轉(zhuǎn)千回……都深深地迷住了我?！?br> ——題記，改自《國產(chǎn)凌凌漆》

正文

最近發(fā)現(xiàn)css3漸變無敵，邊邊角角利用linear-gradient或者radial-gradient也可以實(shí)現(xiàn)，如下圖，包括之前所講的 CSS3 | 制作文字波浪線效果 一文也有談到：

Paste_Image.png

1. linear-gradient

語法

引自MDN

<side-or-corner>
描述漸變線的起始點(diǎn)位置。它包含兩個(gè)關(guān)鍵詞：第一個(gè)指出垂直位置left or right，第二個(gè)指出水平位置top or bottom。關(guān)鍵詞的先后順序無影響，且都是可選的。to top, to bottom, to left 和 to right這些值會(huì)被轉(zhuǎn)換成角度0度、180度、270度和90度。其余值會(huì)被轉(zhuǎn)換為一個(gè)以向頂部中央方向?yàn)槠瘘c(diǎn)順時(shí)針旋轉(zhuǎn)的角度。漸變線的結(jié)束點(diǎn)與其起點(diǎn)中心對(duì)稱。
<angle>
用角度值指定漸變的方向（或角度）。 See <angle>.
<color-stop>
由一個(gè) <color>值組成，并且跟隨著一個(gè)可選的終點(diǎn)位置（可以是一個(gè)百分比值或者是沿著漸變軸的<length>）。

比如說linear-gradient( 45deg, blue, red )，效果如下，具體用法可以看下 MDN 或者W3C。

圖例

再來看background: linear-gradient(135deg, transparent 50%, red );

圖例

如此一來，那實(shí)現(xiàn)剛開始的第一張效果圖，可有想法？
我們繼續(xù)看background: linear-gradient(135deg, transparent 15px, red 0)：

圖例

而background是允許有多背景的，結(jié)合background-size（避免漸變圖案覆蓋）， background-repeat（避免漸變圖案平鋪），利用background-position設(shè)置圖片位置，最終第一張效果圖實(shí)現(xiàn)代碼：

.bevel {
    width: 10rem;
    height: 10rem;
    margin: 30px auto;
    background: #58a;
    background: linear-gradient(135deg, transparent 15px, #6cc 0) top left, linear-gradient(-135deg, transparent 15px, #6cc 0) top right,linear-gradient(-45deg, transparent 15px, #6cc 0) bottom right, linear-gradient(45deg, transparent 15px, #6cc 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

效果圖.png

2. radial-gradient

語法

// 定義結(jié)束的形狀
radial-gradient( circle, … ) /* Synonym of radial-gradient( circle farthest-corner, … ) */
radial-gradient( ellipse, … ) /* Synonym of radial-gradient( ellipse farthest-corner, … ) */
radial-gradient( <extent-keyword>, … ) /* It draws a circle */
radial-gradient( circle radius, … ) /* A centered circle of the given length. It can't be a percentage */
radial-gradient( ellipse x-axis y-axis, … ) /* The two semi-major axes are given, horizontal, then vertical */
// 定義形狀的位置
radial-gradient ( … at <position>, … )// Definition of the color stops
radial-gradient ( …, <color-stop>, … )
radial-gradient ( …, <color-stop>, <color-stop> )

了解了radial-gradient的語法后，實(shí)質(zhì)上實(shí)現(xiàn)邊角的道理跟linear-gradient是一樣樣的。

具體就不說了，直接看第二張圖效果的代碼，如下：

.concave {
    width: 10rem;
    height: 10rem;
    margin: 30px auto;
    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;
}

了解了這個(gè)奇特的用法，你是不是可以創(chuàng)造出更多有意思的形狀呢~
暫此，敬請(qǐng)交流~

參考文章
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-image
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds