CSS - 段ボールアイコン

HTMLとCSSを使用して段ボールのアイコンを描画する方法のコード例です。

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

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

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

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

/* 段ボールアイコン */
.cardboard-box {
	--w: 300px; /* 基準サイズ */
	position: relative;
	width: var(--w);
	height: var(--w);
}

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

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

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

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