SOURCE

console 命令行工具 X clear

                    
>
console
<div class="wrap"><!--
  <div class="coupon">
    <div class="coupon-left">
       阿Sa健康
    </div>
    <div class="coupon-con">
      看啥看
    </div>
  </div>-->
  <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
}