CSS - カーソルアイコン

HTMLとCSSを使用してマウスカーソルのアイコンを描画する方法のコード例です。

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

子要素には三角形の部分と、芯になる部分の2つの<div>要素を設置しています。

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

最初の子要素<div>では疑似要素「before」と「after」で左右の三角形を作成しています。

CSSカスタムプロパティで基準値とする図形の横幅「--w」を指定しています。
「--w」を使ってカーソルアイコンの形に必要な値を計算します。

また、カスタムプロパティ「--angle」を使ってカーソルアイコンを回転させる事が可能です。

/* コンテナ */
.cursor-icon {
	--w: 300px; /* 基本サイズ */
	--angle: -45deg; /* 回転 */
	position: relative;
	width: var(--w);
	height: var(--w);
}

/* 左右の三角形 */
.cursor-icon div:nth-child(1) {
	position: absolute;
	width: var(--w);
	height: var(--w);
	transform: rotate(var(--angle));
}

/* 左の三角形 */
.cursor-icon div:nth-child(1)::before {
	content: "";
	position: absolute;
	top: 5%;
	left: 14.5%;
	border-bottom: calc(var(--w) * 0.5) solid #ff5500;
	border-right: calc(var(--w) * 0.25) solid transparent;
	border-left: calc(var(--w) * 0.25) solid transparent;
	transform: rotate(-26.5deg) skew(-44.5deg);
}

/* 右の三角形 */
.cursor-icon div:nth-child(1)::after {
	content: "";
	position: absolute;
	top: 5%;
	left: 35.5%;
	border-bottom: calc(var(--w) * 0.5) solid #ff5500;
	border-right: calc(var(--w) * 0.25) solid transparent;
	border-left: calc(var(--w) * 0.25) solid transparent;
	transform: rotate(26.5deg) skew(44.5deg);
}

/* 芯 */
.cursor-icon div:nth-child(2) {
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20%;
	height: 60%;
	background-color: #ff5500;
	transform: rotate(var(--angle));
}