<div class="box"></div>
.box {
  display:inline-block;
  width:300px;
  aspect-ratio:1;
  background:linear-gradient(135deg,#1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b);
  -webkit-mask:
    linear-gradient(#000 0 0) center/calc(100% - 80px) 100% no-repeat,
    conic-gradient(from 45deg at left, #0000,#000 1deg 89deg,#0000 90deg) left/40px 80px repeat-y,
    conic-gradient(from -135deg at right, #0000,#000 1deg 89deg,#0000 90deg) right/40px 80px repeat-y;
         mask:
    linear-gradient(#000 0 0) center/calc(100% - 80px) 100% no-repeat,
    conic-gradient(from 45deg at left, #0000,#000 1deg 89deg,#0000 90deg) left/40px 80px repeat-y,
    conic-gradient(from -135deg at right, #0000,#000 1deg 89deg,#0000 90deg) right/40px 80px repeat-y;
}

body {
  background: linear-gradient(90deg,#ddd,#fff);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.