CSS3实现缺角矩形

1. 伪元素实现

最多只能弄两个缺角

<div class="bg cover"></div>


.bg{
  width: 120px;
  height: 80px;
  background: #58a;
} /* 下文元素都使用了此样式 */
 
.cover{
    position: relative;
}
.cover::before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    border: 5px solid #fff;
    border-top-color: transparent;
    border-left-color: transparent;
}
.cover::after{
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    border: 5px solid #fff;
    border-bottom-color: transparent;
    border-right-color: transparent;
}

2. 渐变实现

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

direction: 用角度值指定渐变的方向（或角度）。
color-stopn: 用于指定渐变的起止颜色。

多个角

<div class="bg missAngle"></div>

.missAngle{
    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;
  }

弧形切角

.cricle{
  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, ...)

.rect-clip{
  background-image: url(./im.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  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)
}

Clippy ，一个用来生成各种形状（包括随意拖拉自定义）并且可以直接生成代码的网站。

3. 其他

还有更多效果请看参考链接
CSS3实现缺角矩形，折角矩形以及缺角边框