<div class="slice"></div>
body {
  margin:0;
  height:100vh;
  background:lightblue;
  display:grid;
  place-items:center;
}
.slice {
  width:200px;
  height:200px;
  display:grid;
  filter:
    drop-shadow(250px 0 0 #f1c200) drop-shadow(500px 0 0 #f1c200)
    drop-shadow(0 250px 0 #f1c200) drop-shadow(0 500px 0 #f1c200)
    drop-shadow(0 -750px 0 #f1c200) drop-shadow(-1000px 0 0 #f1c200)
    drop-shadow(3px 3px 0 #e18500);
}
.slice:before {
  content:"";
  background:#f1c200;
  --g:radial-gradient(farthest-side,#000 98%,#0000);
  -webkit-mask:
    var(--g) 42% -15%/40px 40px,
    var(--g) 86% -3%/20px 20px,
    var(--g) -9% 14%/40px 40px,
    var(--g) -5% 55%/20px 20px,
    var(--g) 24% 111%/40px 40px,
    var(--g) 72% 106%/20px 20px,
    var(--g) 113% 24%/40px 40px,
    var(--g) 107% 74%/20px 20px,
    var(--g) 30% 28%/30px 30px,
    var(--g) 63% 23%/15px 15px,
    var(--g) 80% 52%/40px 40px,
    var(--g) 20% 70%/30px 30px,
    var(--g) 50% 50%/10px 10px,
    var(--g) 55% 80%/15px 15px,
    var(--g) 88% 85%/30px 30px,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite: exclude;
  -webkit-mask-repeat:no-repeat;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.