CSS - Cardboard Box

Code example for drawing a cardboard box using HTML and CSS.

The HTML sets class "cardboard-box" as the container. Parts are top, left, right, tape with classes "cardboard-box-top", "cardboard-box-left", etc.

<div class="cardboard-box">
		<div class="cardboard-box-top"></div>
		<div class="cardboard-box-left"></div>
		<div class="cardboard-box-right"></div>
		<div class="cardboard-box-tape"></div>
</div>

The CSS custom property "--w" sets the base size.

The parts use "transform" to adjust angles and skews.

/* Cardboard Box Icon */
.cardboard-box {
	--w: 300px; /* Base Size */
	position: relative;
	width: var(--w);
	height: var(--w);
}

/* Top */
.cardboard-box-top {
	position: absolute;
	top: 5%;
	left: 30%;
	width: 40%;
	height: 40%;
	background-color: #cd853f;
	transform: rotate(135deg) skew(30deg, 30deg);
}

/* Left */  
.cardboard-box-left {
	position: absolute;
	top: 31%;
	left: 5%;
	width: 45%;
	height: 50%;
	background-color: #b37537;
	transform: skewY(15deg);
}

/* Right */
.cardboard-box-right {
	position: absolute;
	top: 31%;
	left: 50%;
	width: 45%;
	height: 50%;
	background-color: #cd853f;
	transform: skewY(-15deg);
}

/* Tape */
.cardboard-box-tape {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.cardboard-box-tape::before {
	content: "";
	position: absolute;
	top: 5%;
	left: 45%;
	width: 10%;
	height: 40%;
	background-color: #ffa74f;
	transform: rotate(135deg) skew(30deg, 30deg);
}

.cardboard-box-tape::after {
	content: "";
	position: absolute;
	top: 31%;
	left: 67%;
	width: 10%;
	height: 20%;
	background-color: #ffa74f;
	transform: skewY(-15deg)
}