css 圆点样式 优惠券样子
css
.tax-split {
position: absolute;
height: 130px;
width: 1px;
left: 80%;
top: 0;
}
.tax-split .line {
border-right: 1px dotted #FFCDCD;
opacity: 0.7;
width: 100%;
height: 100%;
}
.tax-split:after,
.tax-split:before {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
left: -4px;
}
.tax-split:after {
bottom: -5px
}
.tax-split:before {
top: -5px
}
.con {
width: 300px;
height: 130px;
background: #f00;
position: relative;
border-radius: 6px;
}
html
<div class="con">
<div class="tax-split ">
<div class="line" style="border-color:#FFFFFF;"></div>
</div>
</div>
效果