css写多边形边框（clip-path）css写多边形边框(clip-path)
效果图
css样式
.box-ticket {
padding: 0.1vw 0.1vw 0.1vw 0.1vw;
background-color: #3f78c5;
clip-path: polygon(0% 0%, 11.7vw 0, 13.7vw 1.5vw, 100% 1.5vw, 100% 100%, 0% 100%);
}
.left-box-ticket {
width: 28vw;
height: 11.7vw;
background-image: url('__CDN__/assets/image/⾼光.png');
/* 不重复 */
background-repeat: no-repeat;
/* 满屏 */
background-size: 21vw 4.2vw;
background-color: #040469;
border-top: solid 0.1vw transparent;
border-right: solid 0.165vw #3f78c5;
clip-path: polygon(0% 0%, 11.5vw 0, 13.5vw 1.5vw, 100% 1.5vw, 100% 100%, 0% 100%);
}
data
<div class="box-ticket">
<div class="left-box-ticket">
</div>
</div>cssclass属性
注：clip-path CSS 属性使⽤裁剪⽅式创建元素的可显⽰区域。区域内的部分显⽰，区域外的隐藏

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