console
<div class="wrap">
<div class="coupon">
<div class="coupon-top">
阿Sa健康
</div>
<div class="coupon-btm">
看啥看
</div>
</div>
</div>
html,
body {
box-sizing: border-box;
margin: 0;
padding: 20px;
height: 100%;
}
.coupon {
overflow: hidden;
border-radius: 10px;
}
.coupon-left {
float: left;
width: 150px;
height: 150px;
position: relative;
color:#fff
}
.coupon-left::before {
content: '';
position: absolute;
top: -210px;
display: block;
right: -210px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 200px solid #252525;
clip: rect(0, 210px, 285px, 0);
z-index:-1
}
.coupon-left::after {
content: '';
position: absolute;
bottom: -210px;
display: block;
right: -210px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 200px solid #252525;
clip: rect(135px, 210px, 285px, 0);
z-index:-1
}
.coupon-con {
float: left;
width: 350px;
height: 150px;
position: relative;
}
.coupon-con::before {
content: '';
position: absolute;
top: -410px;
display: block;
left: -410px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 400px solid #fff;
clip: rect(0, 800px, 485px, 410px);
z-index:-1
}
.coupon-con::after {
content: '';
position: absolute;
bottom: -410px;
display: block;
left: -410px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 400px solid #fff;
clip: rect(335px, 800px, 485px, 410px);
z-index:-1
}
.coupon-top,.coupon-btm{ position:relative;width:100%; height:50px}
.coupon-top:before{content: '';
position: absolute;
bottom: -210px;
display: block;
right: -210px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 200px solid #252525;
clip: rect(135px, 210px, 285px, 0);
z-index:-1}
.coupon-top:after {
content: '';
position: absolute;
bottom: -210px;
display: block;
right: -210px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 200px solid #252525;
clip: rect(135px, 210px, 285px, 0);
z-index:-1
}