css3实现缺角四边形_CSS3实现缺角矩形，折角矩形以及缺角边框

前言

前几天偶然看到缺角矩形这个功能，脑袋中第一想法是，搞个绝对定位的伪元素，哪里需要挡哪里，或者找UI小哥聊聊天，忽然灵光一闪，想起之前翻过的《CSS揭秘》一书，记得有这个篇章，遂有了此文。

话不多说，放个效果图先

缺角

CSS3实现缺角矩形，折角矩形以及缺角边框-1.png (10.03 KB, 下载次数: 0)

2020-7-22 19:03 上传

1. 伪元素实现

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

}用伪元素画一个和背景色相同的三角形，然后绝对定位到需要遮挡的地方，如下图，但是这个最多只能弄两个缺角

CSS3实现缺角矩形，折角矩形以及缺角边框-2.png (720 Bytes, 下载次数: 0)

2020-7-22 19:03 上传

2. 渐变实现

CSS语法

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

direction用角度值指定渐变的方向(或角度)。

color-stop1, color-stop2,...用于指定渐变的起止颜色。

并且渐变可以接受一个角度(比如45deg)作为方向，而且色标的位置信息也可以是绝对的长度值。

CSS3实现缺角矩形，折角矩形以及缺角边框-3.png (141.25 KB, 下载次数: 0)

2020-7-22 19:03 上传

45deg: 表示从左下到右上的方向

-45deg: 表示从右下到左上的方向

......

.missAngle{

background: linear-gradient(-45deg, transparent 10px, #58a 0);

}

CSS3实现缺角矩形，折角矩形以及缺角边框-4.png (654 Bytes, 下载次数: 0)

2020-7-22 19:03 上传

实现多个角

.rect{

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-siz