<div class="coupon">
   <div class="coupon-left"></div>
   <div class="coupon-right"></div>
</div>
body {
 background:linear-gradient(90deg,rgba(237,117,102,1) 0%,rgba(234,54,75,1) 100%); 
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
.coupon {
  width: 710px;
  height: 220px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.coupon-left {
  width: 520px;
  height: 220px;
  position: relative;
  overflow: hidden;
  /* background: #fff; */
}
.coupon-left::before, .coupon-left::after{
  content: '';
  position: absolute;
  right: -575px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 560px solid #fff;
}  
.coupon-left::before {
  top: -575px;
  clip: rect(575px,575px,685px,55px);
}
.coupon-left::after {
  top: -355px;
  clip: rect(465px,575px,575px,55px);
}


.coupon-right {
  width: 190px;
  height: 220px;
  position: relative;
  overflow: hidden;
  /* background: #252525; */
}
.coupon-right::before, .coupon-right::after {
  content: '';
  position: absolute;
  right: -105px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 280px solid #252525;
}
.coupon-right::before {
  top: -295px;
  clip: rect(295px,485px,405px,295px);
}
.coupon-right::after {
  top: -75px;
  clip: rect(185px,485px,295px,295px);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.