<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);
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);
mask-composite:xor;
mask-composite: exclude;
mask-repeat:no-repeat;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.