<div class="block"></div>
.block {
position: relative;
margin: 0 auto;
width: 50%;
height: 200px;
background:
radial-gradient(circle at -30px 50%, transparent 50px, #4caf50 51px) no-repeat padding-box 0 0 / 50% 100%,
radial-gradient(circle at calc(100% + 30px) 50%, transparent 50px, #4caf50 51px) no-repeat padding-box 100% 0 / 50% 100%,
radial-gradient(circle at -26px 50%, transparent 46px, #000 47px) no-repeat border-box 0 0 / 50% 100%,
radial-gradient(circle at calc(100% + 26px) 50%, transparent 46px, #000 47px) no-repeat border-box 100% 0 / 50% 100%;
border-radius: 15px;
border: 4px solid transparent;
filter: drop-shadow(-5px 5px 0 #000);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.