CSS - プレゼントボックス

HTMLとCSSを使用してプレゼントボックスのアイコンを描画する方法のコード例です。

HTMLコードはプレゼントボックスを描画するコンテナ要素としてクラス名 "present-box" を設定しています。
プレゼントボックスのパーツは上、左、右向きのテープ、左向きのテープで作成、それぞれクラス名”present-box-top”、”present-box-left”、”present-box-right”、”present-box-tape left”を指定しています。

<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>

CSSカスタムプロパティで基準値とする図形の横幅「--w」を指定しています。

それぞれのパーツは「transform」プロパティで角度、傾斜をつけながら調節しています。

/* プレゼントボックス */
.present-box {
	--w: 300px; /* 基準サイズ */
	position: relative;
	width: var(--w);
	height: var(--w);
}

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

/* 左パーツ */
.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;
}

/* 右パーツ */
.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;
}


/* テープ部分 */
.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);
}