CSS3实现缺⾓矩形，折⾓矩形以及缺⾓边框
前⾔
前⼏天偶然看到缺⾓矩形这个功能，脑袋中第⼀想法是，搞个绝对定位的伪元素，哪⾥需要挡哪⾥，或者UI⼩哥聊聊天，忽然灵光⼀闪，想起之前翻过的《CSS揭秘》⼀书，记得有这个篇章，遂有了此⽂。
话不多说，放个效果图先
缺⾓
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. 渐变实现
CSS语法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
值描述
direction⽤⾓度值指定渐变的⽅向（或⾓度）。
color-stop1, color-stop2,...⽤于指定渐变的起⽌颜⾊。
并且渐变可以接受⼀个⾓度（⽐如45deg）作为⽅向，⽽且⾊标的位置信息也可以是绝对的长度值。
45deg: 表⽰从左下到右上的⽅向
-45deg: 表⽰从右下到左上的⽅向
......
<div class="bg missAngle"></div>
.missAngle{
background: linear-gradient(-45deg, transparent 10px, #58a 0);
}
实现多个⾓
<div class="bg rect"></div>
.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-size: 50% 50%;
background-repeat: no-repeat;
/* Internet Explorer 9 及更早版本 IE 浏览器不⽀持渐变。 */
}
这个实际上使⽤四个图形拼接出来的，如下图
background-size: 50% 50%; 表⽰每个⼩图形宽50%，⾼50%
弧形切⾓
<div class="bg cricle"></div>
.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;
}
最后，Internet Explorer 9 及更早版本 IE 浏览器不⽀持渐变。
这⾥有⼀个问题，拉动浏览器，当宽度被挤压，⼩于定义宽度时，可能会出现⽩⾊的缝隙，这⾥需要注意⼀下下，如下图
当背景图是⼀张图⽚的时候，这时实现缺⾓的话渐变就不好使了，接下来请出clip-path
clip-path实现
clip-path CSS 属性可以创建⼀个只有元素的部分区域可以显⽰的剪切区域。区域内的部分显⽰，区域外的隐藏。
clip-path: polygon(x y, x1 y1, x2 y2, x3 y3, ...)
x y, x1 y1, x2 y2, x3 y3, ... 这些表⽰坐标轴中的点，根据所有的点绘制⼀个封闭的图形
<div class="bg rect-clip"></div>
.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)
}
效果图：
总宽度为120px
calc(100% - 15px)  =>  105px
100%              =>  120px
将对应的点连接起来就构成了⼀个缺⾓矩形
clip-path的功能还是蛮强⼤的，绘制各种各样的形状，菱形，五⾓星啊等等，⽐如下图
<div class="bg clip5"></div>
.
clip5{
margin-left: 30px;
/*clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);*/
clip-path: inset(0 round 0 25%); /* 可以简写 */
/* inset(<top> <right> <bottom> <left> round <top-radius> <right-radius> <bottom-radius> <left-radius>) */    /* inset使⽤四个值（对应“上右下左”的顺序）来设置圆⾓半径。 */
}
⽤来做动画
<div class="line-box">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
</div>
.line-box{
width: 100px;
height: 60px;
}
.line{
width: 100%;
height: 100%;
background: #26b91a;
}
.line1{
-webkit-clip-path: polygon(80% 0, 40% 40%, 80% 80%);
clip-path: polygon(80% 0, 40% 40%, 80% 80%);
animation: a 2s 1s infinite;
}
.line2{
clip-path: polygon(10% 10%, 60% 40%, 50% 90%);
animation: b 2s 1s infinite;
}
.
line3{
clip-path: polygon(20% 20%, 30% 20%, 30% 50%, 20% 50%);
animation: c 2s 1s infinite;
}
@keyframes a{
90% {
background: #1f351f;
}
100% {
clip-path: polygon(50% 40%, 25% 100%, 75% 100%);
}
}
@keyframes b{
90% {
background: #1f351f;
}
100% {
clip-path: polygon(50% 0, 0% 100%, 100% 100%);
}
}
@keyframes c{
90% {
background: #1f351f;
}
100% {
clip-path: polygon(40% 0, 60% 0, 60% 100%, 40% 100%);
}
}
这⾥只列举了clip-path的部分功能，更多形状点，⼀个⽤来⽣成各种形状（包括随意拖拉⾃定义）并且可以直接⽣成代码的⽹站。
虽然这个能绘制各式形状，但是兼容性却不怎么好，⾕歌版本79，⽕狐71测试正常，IE不可，具体兼容性请看
如果项⽬需要考虑兼容性问题，也可以放⼀张图⽚当作背景图，图⽚压缩⼀下，或者只有最多两个缺⾓使⽤伪元素，根据项⽬实际情况选择合适⾃⼰的⽅案
缺⾓边框
<div class="out-rect">
<div class="in-rect"></div>
</div>
.out-rect {
margin-top: 30px;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 80px;
padding: 5px;
background: linear-gradient(-45deg, transparent 10px, #58a 0) top right;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.in-rect{
width: 100%;
css怎么创建height: 100%;
background: linear-gradient(-45deg, transparent 8px, #fff 0) top right;
background-size: 100% 100%;
background-repeat: no-repeat;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。