<div class="spice"></div>
body {
margin:0;
height:100vh;
display:grid;
place-items:center;
background:#efab9f;
}
.spice {
width:300px;
height:200px;
display:flex;
}
.spice:before,
.spice:after {
content: "";
width: 30%;
margin: 0 auto;
background:
linear-gradient(to bottom right,#0000 38%,#000 39% 61%,#0000 62%) 58% 67%/17% 5%,
linear-gradient(to bottom left,#0000 38%,#000 39% 61%,#0000 62%) 42% 67%/17% 5%,
linear-gradient(#000 0 0) 50% 81%/13% 1%,
radial-gradient(farthest-side,#fff 98%,#0000) var(--p1,68%) 72%/6% 2%,
radial-gradient(farthest-side,#fff 98%,#0000) var(--p2,36%) 72%/6% 2%,
radial-gradient(farthest-side,#000 98%,#0000) 68% 73%/13% 6%,
radial-gradient(farthest-side,#000 98%,#0000) 32% 73%/13% 6%,
linear-gradient(-93deg,#caeaf5 47%,#0000 50%) bottom right/26% 63%,
linear-gradient(93deg,#caeaf5 47%,#0000 50%) bottom left/26% 63%,
linear-gradient(to bottom left,#0000 49.5%,var(--c,#fff) 50%) 50% 50%/100% 10% content-box,
linear-gradient(var(--c,#fff) 0 0) bottom/100% 45% content-box,
repeating-linear-gradient(90deg,#808487 0 3px,#0000 0 6px) 50% 2px/40% 2px,
repeating-linear-gradient(90deg,#808487 0 3px,#0000 0 6px) 50% 5px/27% 2px,
repeating-linear-gradient(90deg,#808487 0 3px,#0000 0 6px) 50% 8px/15% 2px,
linear-gradient(#a1a5a8 0 0) top/100% 15%,
linear-gradient(#828489 0 0) top/84% 21%,
linear-gradient(#caeaf5 0 0) bottom/100% 79%;
border-radius: 30px 30px 20px 20px;
background-repeat: no-repeat;
clip-path: polygon(0 0,100% 0,100% 21%,92% 21%,100% 80%,100% 100%,0 100%,0 80%,8% 21%,0% 21%);
box-sizing: border-box;
padding: 0 10px 10px;
}
.spice:after {
--c:#786f6a;
--p1:65%;
--p2:32%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.