<div class="nezuko">
<h1>竈門禰豆子</h1>
</div>
body {
margin: 0;
}
body > div {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
}
.nezuko {
position: relative;
background:
linear-gradient(90deg, #f69 20px, transparent 20px, transparent calc(100% - 20px), #f69 calc(100% - 20px)) 0 0 / 120px 70px,
linear-gradient(0deg, #222 1px, transparent 1px) 0 35px / 80px 70px,
#f69;
}
.nezuko::before,
.nezuko::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
mix-blend-mode: multiply;
}
.nezuko::before {
background:
linear-gradient(90deg, #222 1px, transparent 1px) 0 0 / 60px 140px,
linear-gradient(30deg, transparent 50%, #222 50%, #222 calc(50% + 1px), transparent calc(50% + 1px)) 0 0 / 120px 70px,
linear-gradient(-30deg, transparent 50%, #222 50%, #222 calc(50% + 1px), transparent calc(50% + 1px)) 0 0 / 120px 70px,
linear-gradient(90deg, transparent 40px, #fff 40px, #fff calc(100% - 40px), transparent calc(100% - 40px)) 0 0 / 120px 70px,
linear-gradient(0deg, #222 1px, transparent 1px) 0 0 / 40px 70px;
}
.nezuko::after {
background:
linear-gradient(90deg, #fff 20px, transparent 20px) 20px 0 / 60px 70px,
linear-gradient(-60deg, transparent calc(50% - .5px), #222 calc(50% - .5px), #222 calc(50% + .5px), transparent calc(50% + .5px)) 0 0 / 40px 70px,
linear-gradient(60deg, transparent calc(50% - .5px), #222 calc(50% - .5px), #222 calc(50% + .5px), transparent calc(50% + .5px)) 0 0 / 40px 70px;
}
.zenitsu {
background:
linear-gradient(120deg, transparent 90%, #fff 90%) 0 0 / 40px 40px,
linear-gradient(-120deg, transparent 90%, #fff 90%) 0 0 / 40px 40px,
linear-gradient(120deg, transparent 90%, #fff 90%) 20px 20px / 40px 40px,
linear-gradient(-120deg, transparent 90%, #fff 90%) 20px 20px / 40px 40px,
linear-gradient(#ff3, #f63);
}
h1 {
background: #fff;
padding: .5em 1em;
border-radius: .5em;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.