不规则图片显示（css实现多边形）
不规则图⽚显⽰（css实现多边形）
需求：怎样才能截取背景图⽚或者让图⽚在不规则盒⼦⾥⾯展⽰？
原图
实现后的效果图
其实要实现这种效果有两种⽅式：
⼀种是让UI做图的时候就把边框以外的部分设计成与背景⾊相同的颜⾊。
边框图⽚与内容图⽚⼤⼩⼀致，正常重叠就好，这样做的优势可以减少代码量，⽅便服务端维护，不会出现样式兼容问题；缺点也有⼀些，就是特殊形状的展⽰不好实现，会多⼏次图⽚的请求。
另⼀种就是纯CSS实现，主要是利⽤css3中的clip-path属性。
优点就是可以实现任意形状的展⽰，包括图⽚、背景⾊等
代码如下：
<div className="warp">
<img src="./irregularity.png"></img>
</div>
锻炼方法.warp{
background:url(./bj.jpg) no-repeat center;
background-size: cover;遍插茱萸少一人
clip-path:polygon(0% 8%, 6% 0, 23% 0, 26% 4%, 96% 4%, 100% 10%, 100% 91%, 95% 98%, 6% 98%, 0 90%);
}
clip-path介绍
clip-path⽬前浏览器⽀持情况可以
clip-path的其他应⽤
如下：三⾓，四⾓，五⾓星，还有移动端的0.5像素
.three-pointed-star{
clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
还珠格格剧情
陈羽凡前女友.four-pointed-star{
clip-path:polygon(0 50%, 40% 40%, 50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%);
}
.five-pointed-star{
clip-path:polygon(0 36%, 36% 36%, 46% 0, 56% 36%, 92% 36%, 63% 56%, 73% 92%, 46% 70%, 20.6% 92%, 30% 56%); }
.line{
background-color: red;
改一个有意义的号height: 1px;
line-height: 1px;
margin: 10px;
}
.half-line{
关于大自然的手抄报clip-path:polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

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