<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.