Css-深入學習之切角

本文是作者從別的網站和文章學習了解的知識，簡單做了個筆記，想要學習更多的可以參考這里：【css進階】偽元素的妙用--單標簽之美，奇思妙想

 

帶切角的矩形：

該圖來源於（奇思妙想）

Css代碼：

 .notching{
          width: 160px;
          height:160px;
        }
        .notching{
          background:
          linear-gradient(135deg, transparent 15px, deeppink 0)
          top left,
          linear-gradient(-135deg, transparent 15px, deeppink 0)
          top right,
          linear-gradient(-45deg, transparent 15px, deeppink 0)
          bottom right,
          linear-gradient(45deg, transparent 15px, deeppink 0)
          bottom left;
          background-size: 50% 50%;
          background-repeat: no-repeat;
        }

1、建立一個矩形

2、利用線性漸變實現切角，科普一下代碼知識：

linear-gradient             Css3的線性漸變

(135deg,                     漸變角度，看張圖秒懂

transparent 15px,                 透明 15px的寬度

deeppink 0) 深粉色，              這里的0是漸變到底

top left;                               漸變填充 上左

 

3、根據第一個寫好的（上左）漸變：linear-gradient(135deg, transparent 15px, deeppink 0)top left

然后復制粘貼，調整角度同樣的去填充好上右，下左，下右。OK，現在還看不錯啥效果。

4、最后一步，設置下background-size: 50% 50%; background-repeat: no-repeat;

 （background-size: 50% 50%;【解釋一下：把每個方向的填充看成一個小方塊，每個填充的小方塊X,Y都占據了其50%，也就是每個小方塊的是x*50%，y*50%這樣子，所以，呢，為了讓他剛好填充合適就是50%了，如果是40%你會發現小方塊太小了，填充不慢，如果是100%你會發現太大了，占滿了都。】

最后一個就是不要重復了 ，肯定的，重復就做不出這個效果了。）

 

不規則切角矩形：

（該圖靈感來源於上面的第四步）

這是我在無意研究第四步的background-size時發現的，也算是一個小聰明吧。

按照上面的步驟，當你把background-size設置成90% 90%時，你就發現上面這個圖形了，其實原理就是，當每個小方塊占到原圖的90%時，嚴重超出了原本界定的框線，然后就看到了超出的一小部分，其實更多的部分由於重疊在一起了，所以就沒能看出來。

如果我們把每個填充的方向分開來看，也許你就瞬間秒懂了：

在比如說我們給每個方向的漸變調整下顏色：

（然后呢就看到了，其實是因為太大重疊在一起，超出邊界而產生的）

實際上，也就是使其超出一點，剛好合適，就實現了上面的不規則切角矩形了。