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

}