css實現切角效果

1. 乙個切角

思路：如果我們要得到有乙個切角的元素，我們只需要使用乙個徑向漸變就可以達到這個目標，這個漸變需要把乙個透明色標放在切角處，然後再相同的位置設定另乙個色標，並且把它的顏色設定成我們想要的背景色。

html

<

div 
class
="corner"
>
div>

.corner

2. 兩個切角

由上面的例子，我們很快想到這麼寫

css

.corner

我們發現並沒有達到我們想要的效果，這是因為左下角和右下角的兩個漸變把對方覆蓋了，所以只看到背景色。

於是我們想到了background-size，沒錯，如果把background-size的值設定為一半,是不是就可以了呢？事實證明還是不對，原因在於我們忘記把background-repeat關掉了，因而每層漸變圖案各自平鋪了兩次，這導致背景仍然是相互覆蓋的，只不過這次是因為背景平鋪，所以修改後的**是這樣的：

css

.corner

3. 四個切角

css

.corner

這裡需要注意的是：background-size: 50% 51%;如果高度設定為50%,中間會出現一條空隙。

4. 弧形切角

css

.corner

5. 使用border-imgage+svg實現

6. 使用clip-path實現

css

.corner

這種方法的好處是：我們可以使用任意型別的文字，但是有乙個很大的缺點是：當內邊距不足時，它會裁切掉文字，因為它只能對元素進行統一的裁切，並不能區分元素的各個部分。

.corner

利用css實現邊框切角效果

out rect margin top 30px display flex align items center justify content center width 200px height 200px padding 5px background linear gradient 45deg,...

《css揭秘》筆記（九），切角效果

假設我們只需要乙個角被切掉的效果，以右下角為例。漸變可以接受乙個角度 45deg 作為方向，而且色標的位置資訊可以是絕對的長度值。因而我們可以用乙個線性漸變就能完成右下角被切掉的效果，只需要把乙個透明色標放在切角處。現在我們想要兩個角被切掉的效果，以底部的兩個角為例，只用一層漸變是不夠的，還需要再加...

Css 深入學習之切角

本文是作者從別的 和文章學習了解的知識，簡單做了個筆記，想要學習更多的可以參考這裡 css高階 偽元素的妙用 單標籤之美，奇思妙想 帶切角的矩形 該圖 於 奇思妙想 css notching.notching1 建立乙個矩形 2 利用線性漸變實現切角，科普一下 知識 linear gradient ...