<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%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.