div {
	color: #000;
	--color-shadow: #646464;
	--size: 70vmin;
	--pillar-width: 8.5%;
	--pillar-height: 30%;
	--pillar-offset: 8%;
	background-image:
		linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0),
		linear-gradient(currentColor 0 0);
	background-size:
		var(--pillar-width) var(--pillar-height),
		var(--pillar-width) var(--pillar-height),
		var(--pillar-width) var(--pillar-height),
		var(--pillar-width) var(--pillar-height);
	background-position:
		right 0% top 50%,
		0% 50%,
		left 50% bottom var(--pillar-offset),
		50% var(--pillar-offset);
	position: relative;
	width: var(--size);
	height: var(--size);
	background-repeat: no-repeat;
	filter: drop-shadow(0 calc(var(--size) * 0.05263) calc(var(--size) * 0.0436) var(--color-shadow));
}
div::before,
div::after {
	content: '';
	position: absolute;
	left: 50%;
	width: 71%;
	height: 71%;
	border: calc(var(--size) * 0.1015625) solid currentColor;
	transform: translate(-50%, -50%) rotateX(45.2deg) scaleX(1.058) scaleY(1.01) rotateZ(45deg);
	border-radius: 5% 10%;
}
div::before {
	top: 34.7%;
}
div::after {
	bottom: -36.2%;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	padding: 0;
	margin: 0;
	height: 100%;
}

body {
	display: grid;
	place-items: center;
	background-color: #fff;
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: #000;
	}

	div {
		color: #fff;
		--color-shadow: #ffffff26;
	}
}