CSS - Present Box

Code example for drawing a present box icon using HTML and CSS.

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

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

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

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

/* Present Box */
.present-box {
	--w: 300px; /* Base size */
	position: relative;
	width: var(--w);
	height: var(--w);
}

/* Top Part */
.present-box-top {
	position: absolute;
	top: 4%;
	left: 28.5%;
	width: 43%;
	height: 40%;
	background-color: #ff0000;
	transform: rotate(135deg) skew(30deg, 30deg);
}

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

.present-box-left::before {
	content: "";
	position: absolute;
	top: 0;
	left: -2%;
	width: 104%;
	height: 30%;
	border-bottom: solid 1px rgba(0, 0, 0, 0.4);
	background-color: #e60000;
}

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

.present-box-right::before {
	content: "";
	position: absolute;
	top: 0;
	left: -2%;
	width: 104%;
	height: 30%;
	border-bottom: solid 1px rgba(0, 0, 0, 0.4);
	background-color: #ff0000;
}

/* Tape Part */
.present-box-tape {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.8;
	/* overflow: hidden; */
}

.present-box-tape::before {
	content: "";
	position: absolute;
	top: 4%;
	left: 44%;
	width: 10%;
	height: 42%;
	background-color: #ffff66;
	transform: rotate(135deg) skew(30deg, 30deg);
}

.present-box-tape::after {
	content: "";
	position: absolute;
	top: 30%;
	left: 67%;
	width: 10%;
	height: 50%;
	background-color: #ffff66;
	transform: skewY(-15deg);
}

.present-box-tape.left::before {
	top: 3%;
	left: 46%;
	transform: rotate(45deg) skew(-30deg, -30deg);
}

.present-box-tape.left::after {
	top: 30%;
	left: 22%;
	transform: skewY(15deg);
}