先来效果图
实现优惠券的方式来展示,直接上代码,css我用了less
.coupons{
width: 100%;
height: 100px;
margin: 15px 0;
position: relative;
display: flex;
justify-content: space-between;
text-align: start;
@leftLen : 30%;
&::before,
&::after{
content: '';
position: absolute;
width: 100%;
height: 50%;
top: 0;
left: 0;
background: #ffffff;
//核心代码
background: radial-gradient(circle at @leftLen 0px, transparent 8px, #ffffff 9px)left top;
background-repeat: no-repeat;
}
&::after{
top: 50%;
right: 0;
background: radial-gradient(circle at @leftLen 100%, transparent 8px, #ffffff 9px)left top;
};
}
这个代码只是小凹的透明小圆圈,只需要一个div容器就可以了,完整代码点下面
https://github.com/smallMote/flowerShop/blob/master/src/page/Coupons.vue