css實現缺角的幾種方法

-

1、用dom元素遮擋，想擋幾個擋幾個，這個就不說了。

2、用css3漸變背景：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

direction：用角度值指定漸變的方向（或角度）。

color-stop1, color-stop2,...：用於指定漸變的起止顏色。

 

 

遮擋一個角

background-image: linear-gradient(-45deg,transparent 10px,cadetblue 0);
  /* 或者 */
background-image: linear-gradient(to left top,transparent 10px,cadetblue 0);

遮擋多個角：

background: linear-gradient(135deg, transparent 10px, #58a 0) top left,
          linear-gradient(-135deg, transparent 10px, #58a 0) top right,
          linear-gradient(-45deg, transparent 10px, #58a 0) bottom right,
          linear-gradient(45deg, transparent 10px, #58a 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;

 

 這個實際上使用四個圖形拼接出來的

background-size: 50% 50%; 表示每個小圖形寬50%，高50%

弧形切角：

background: radial-gradient(circle at top left, transparent 10px, #58a 0) top left,
          radial-gradient(circle at top right, transparent 10px, #58a 0) top right,
          radial-gradient(circle at bottom right, transparent 10px, #58a 0) bottom right,
          radial-gradient(circle at bottom left, transparent 10px, #58a 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;

 

 clip-path

clip-path CSS 屬性可以創建一個只有元素的部分區域可以顯示的剪切區域。區域內的部分顯示，區域外的隱藏。

clip-path: polygon(x y, x1 y1, x2 y2, x3 y3, ...)

 

background:cadetblue;
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px,  100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px)

 

 

 

 clip-path異常強大，可以繪制出很多中缺角多邊形

 

 

 

 

-