<div class="toxic">
</div>
body {
--c:#000;
--b:#ffff00;
margin:0;
height:100vh;
display:grid;
place-items:center;
background:pink;
}
.toxic {
width: 347px;
height: 300px;
display:grid;
background:var(--b);
padding: 20px 20px 100px;
margin:20px;
border-radius: 12px;
border: 2px solid;
box-shadow: 7px 8px 15px #686767;
filter: blur(2px) contrast(6);
}
.toxic:before {
content:"";
grid-area:1/1;
width: 180px;
height: 180px;
margin: auto auto 20px;
--g:radial-gradient(farthest-side,var(--c) 98%,#0000);
background:
conic-gradient(from 135deg,var(--b) 92deg,#0000 0) 50% 38%/9% 10%,
radial-gradient(farthest-side,var(--b) 98%,#0000) 35% 30%/13% 13%,
radial-gradient(farthest-side,var(--b) 98%,#0000) 65% 30%/13% 13%,
radial-gradient(farthest-side,var(--b) 98%,#0000) 47.5% 45%/5% 5%,
radial-gradient(farthest-side,var(--b) 98%,#0000) 52.5% 45%/5% 5%,
var(--g) top/56% 50%,
var(--g) 32% 43%/15% 15%,
var(--g) 68% 43%/15% 15%,
var(--g) 74.5% 61.8%/10% 10%,
var(--g) 25.5% 61.8%/10% 10%,
var(--g) 21.5% 68.8%/10% 10%,
var(--g) 78.5% 68.8%/10% 10%,
var(--g) 78.5% 92.5%/10% 10%,
var(--g) 21.5% 92.5%/10% 10%,
var(--g) 74.5% 99.5%/10% 10%,
var(--g) 25.5% 99.5%/10% 10%,
linear-gradient(to bottom right,#0000 43%,var(--c) 0 57%,#0000 0) 50% 91%/55% 32%,
linear-gradient(to bottom left ,#0000 43%,var(--c) 0 57%,#0000 0) 50% 91%/55% 32%,
linear-gradient(var(--c) 0 0) 50% 53%/28% 12%;
background-repeat:no-repeat;
}
.toxic:after {
text-align: center;
content: "Toxic";
font-size: 110px;
font-family: sans-serif;
line-height: 635%;
font-weight: bold;
height: inherit;
grid-area:1/1;
background:
linear-gradient(to bottom left,
#0000 49.5%,#000 50% calc(50% + 10px),
#0000 calc(50% + 11px)) right/50% 100%,
linear-gradient(to bottom right,
#0000 49.5%,#000 50% calc(50% + 10px),
#0000 calc(50% + 11px)) left/50% 100%,
linear-gradient(#000 0 0) bottom/calc(100% - 20px) 10px;
background-repeat:no-repeat;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.