<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);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.