券的格式

Title

券

80减8

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<style>
.coupons-content {
overflow: hidden;
}
.coupons-circles{
position: relative;
width: 16px;
height: 15px;
background: #EB3117;
font-size: 10px;
padding: 3px 0px 3px 7px;
color: #FFFFFF;
border-radius: 3px 0 0 3px;

}
.circles-left {
left: 0px;
transform: translate(-50%, -50%);
}

.tip {
position: absolute;
top: 50%;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
}

.coupons{
display: flex;
}
.coupons-circles-right{
position: relative;
height: 13px;
font-size: 10px;
padding: 3px 7px 3px 3px;
color: #EB3117;
border-radius: 0 3px 3px 0;
border: 1px solid #EB3117;
line-height: 13px;
}
.coupons-circles-right-circles-right{
right: 0px;
transform: translate(50%, -50%);
border: 1px solid red;
}
</style>

<div class="coupons">
<div class="coupons-content">
<div class="coupons-circles">
<div class="circles-left tip"></div>
券
</div>
</div>
<div class="coupons-content">
<div class="coupons-circles-right">
<div class="coupons-circles-right-circles-right tip"></div>
80减8
</div>
</div>
</div>
</body>
</html>