前言
前几天偶然看到缺角矩形这个功能,脑袋中第一想法是,搞个绝对定位的伪元素,哪里需要挡哪里,或者找ui小哥聊聊天,忽然灵光一闪,想起之前翻过的《css揭秘》一书,记得有这个篇章,遂有了此文。
话不多说,放个效果图先
缺角
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;
}
用伪元素画一个和背景色相同的三角形,然后绝对定位到需要遮挡的地方,如下图,但是这个最多只能弄两个缺角
2. 渐变实现
css语法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
值
描述
direction
用角度值指定渐变的方向(或角度)。
color-stop1, color-stop2,...
用于指定渐变的起止颜色。
并且渐变可以接受一个角度(比如45deg)作为方向,而且色标的位置信息也可以是绝对的长度值。
45deg: 表示从左下到右上的方向
-45deg: 表示从右下到左上的方向
......
.missangle{
background: linear-gradient(-45deg, transparent 10px, #58a 0);
}
实现多个角
.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, transpare