CSS - 矢印アイコン

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

このHTMLコードは矢印アイコンを描画する要素となる<div>タグのクラス名 "arrow-icon" を設定しています。

<div class="arrow-icon"></div>

最初の子要素<div>では疑似要素「before」と「after」で上下のパーツを作成しています。

CSSカスタムプロパティで基準値とする図形の横幅「--w」を指定しています。
また、カスタムプロパティ「--angle」を使って矢印アイコンを回転させる事が可能です。

/* 矢印 */
.arrow-icon {
	--w: 300px; /* 基本サイズ */
	--angle: 0deg; /* 回転 */
	position: relative;
	width: var(--w);
	height: var(--w);
}

/* 矢印の上部パーツ */
.arrow-icon::before {
	content: "";
	position: absolute;
	top: 5%;
	left: 25%;
	border-bottom: calc(var(--w) * 0.45) solid #dc143c;
	border-right: calc(var(--w) * 0.25) solid transparent;
	border-left: calc(var(--w) * 0.25) solid transparent;
	transform-origin: center bottom;
	transform: rotate(var(--angle));
}

/* 矢印の下部パーツ */
.arrow-icon::after {
	content: "";
	position: absolute;
	top: 49%;
	left: 40%;
	width: 20%;
	height: 45%;
	background-color: #dc143c;
	transform-origin: center top;
	transform: rotate(var(--angle));
}