css實現切角效果

 

1. 一個切角

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

html

<div class="corner"></div>

css

.corner{
  width: 200px;
  height: 150px;
  background: #58a;
  background: linear-gradient(-45deg,transparent 20px,#58a 0);
}

效果圖

2. 兩個切角

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

css

.corner{
  width: 200px;
  height: 150px;
  background: #58a;
  background: linear-gradient(-45deg,transparent 20px,#58a 0),
              linear-gradient(45deg,transparent 20px,#58a 0);
}

效果圖

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

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

css

.corner{
  width: 200px;
  height: 150px;
  background: #58a;
  background: linear-gradient(-45deg,transparent 20px,#58a 0) right,
              linear-gradient(45deg,transparent 20px,#58a 0) left;
  background-size: 50% 100%;
  background-repeat: no-repeat;
}

效果圖：

3. 四個切角

css

.corner{
  width: 200px;
  height: 150px;
  background: #58a;
  background: linear-gradient(-45deg,transparent 15px,#58a 0) bottom right,
              linear-gradient(45deg,transparent 15px,#58a 0) bottom left,
              linear-gradient(135deg,transparent 15px,#58a 0) top left,
              linear-gradient(-135deg,transparent 15px,#58a 0) top right;
  background-size: 50% 51%;
  background-repeat: no-repeat;
}

效果圖

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

4. 弧形切角

css

.corner{
  width: 200px;
  height: 150px;
  background: #58a;
  background: radial-gradient(circle at bottom right,transparent 15px,#58a 0) bottom right,
              radial-gradient(circle at bottom left,transparent 15px,#58a 0) bottom left,
              radial-gradient(circle at top left,transparent 15px,#58a 0) top left,
              radial-gradient(circle at top right,transparent 15px,#58a 0) top right;
  background-size: 50% 51%;
  background-repeat: no-repeat;
}

效果圖

5. 使用border-imgage+svg實現

6. 使用clip-path實現

css

.corner{
  width: 330px;
  height: 250px;
  background: url('ssd.jpg');
  background-size: cover;
  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);
}

效果圖

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

 

 

 

 

 

 

 

.corner{

width: 330px;

height: 250px;

background: url( 'ssd.jpg');

background-size: cover;

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);

}