<div class="tanjiro"></div>
<div class="nezuko"></div>
<div class="zenitsu"></div>
body {
display: flex;
justify-content: space-between;
min-height: 100vh;
margin: 0;
}
div {
width: calc(100% / 3);
height: 100vh;
background: #fff;
z-index: -1;
}
.tanjiro {
background:
linear-gradient(45deg, #3cc 25%, transparent 25%, transparent 75%, #3cc 75%) 0 0 / 60px 60px,
linear-gradient(45deg, #3cc 25%, transparent 25%, transparent 75%, #3cc 75%) 30px 30px / 60px 60px,
#222;
}
.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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.