<div></div>
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #6c00af;
}

div {
  min-width: 702px;
  min-height: 160px;
  border-radius: 12px;
  background-image:linear-gradient(to bottom, #FF2655 0%, #FF4F26 100%), linear-gradient(to right, #fff, #fff);
  background-size: 210px 100%, cover;
  background-repeat: no-repeat;
  background-position:right center;
  position: relative;
  
  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #6c00af 50%, transparent 50%),
    radial-gradient(circle, #6c00af 50%, transparent 50%);
  background-size: 20px 20px;
    right: 200px;
  }
  &::before {
    top: -10px;
  }
  &::after {
    bottom: -10px;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.