CSS Notes
Search articles
Translation Not Available
This page has not been translated yet. You are viewing the Japanese version.

clip-pathで作成できるアイコン集

clip-pathを使って、svgや画像を使わずにCSSだけでアイコンを作成する方法をいくつか紹介します。

↓ Preview
css 
/* ----- clip-icon ----- */
.clip-icon {
	display: block;
	width: 1em;
	height: 1em;
	background: currentColor;
}

/* ▶︎ */
.clip-icon[data-icon='arrow-triangle'] {
	--inner: 16%;
	clip-path: polygon(
		calc(0% + var(--inner) * 1.5) calc(0% + var(--inner)),
		calc(100% - var(--inner)) 50%,
		calc(0% + var(--inner) * 1.5) calc(100% - var(--inner))
	);
}

/* + */
.clip-icon[data-icon='plus'] {
	--stroke: 4%;
	--inner: 15%;
	clip-path: polygon(
		calc(50% - var(--stroke)) var(--inner),
		calc(50% + var(--stroke)) var(--inner),
		calc(50% + var(--stroke)) calc(50% - var(--stroke)),
		calc(100% - var(--inner)) calc(50% - var(--stroke)),
		calc(100% - var(--inner)) calc(50% + var(--stroke)),
		calc(50% + var(--stroke)) calc(50% + var(--stroke)),
		calc(50% + var(--stroke)) calc(100% - var(--inner)),
		calc(50% - var(--stroke)) calc(100% - var(--inner)),
		calc(50% - var(--stroke)) calc(50% + var(--stroke)),
		var(--inner) calc(50% + var(--stroke)),
		var(--inner) calc(50% - var(--stroke)),
		calc(50% - var(--stroke)) calc(50% - var(--stroke))
	);
}

/* - */
.clip-icon[data-icon='minus'] {
	--stroke: 4%;
	--inner: 15%;
	clip-path: polygon(
		calc(100% - var(--inner)) calc(50% - var(--stroke)),
		calc(100% - var(--inner)) calc(50% + var(--stroke)),
		var(--inner) calc(50% + var(--stroke)),
		var(--inner) calc(50% - var(--stroke))
	);
}

/* > */
.clip-icon[data-icon='arrow-caret'] {
	--stroke: calc(4% / 1.4);
	--inner: 16%;
	clip-path: polygon(
		calc(25% + var(--inner) / 2 + var(--stroke)) calc(0% + var(--inner) - var(--stroke)),
		calc(75% - var(--inner) / 2 + var(--stroke) * 2) 50%,
		calc(25% + var(--inner) / 2 + var(--stroke)) calc(100% - var(--inner) + var(--stroke)),
		calc(25% + var(--inner) / 2 - var(--stroke)) calc(100% - var(--inner) - var(--stroke)),
		calc(75% - var(--inner) / 2 - var(--stroke) * 2) 50%,
		calc(25% + var(--inner) / 2 - var(--stroke)) calc(0% + var(--inner) + var(--stroke))
	);
}

/* x */
.clip-icon[data-icon='x'] {
	--stroke: calc(4% / 1.4);
	--inner: 20%;
	clip-path: polygon(
		calc(var(--inner) + var(--stroke)) calc(var(--inner) - var(--stroke)),
		50% calc(50% - 2 * var(--stroke)),
		calc(100% - var(--inner) - var(--stroke)) calc(var(--inner) - var(--stroke)),
		calc(100% - var(--inner) + var(--stroke)) calc(var(--inner) + var(--stroke)),
		calc(50% + 2 * var(--stroke)) 50%,
		calc(100% - var(--inner) + var(--stroke)) calc(100% - var(--inner) - var(--stroke)),
		calc(100% - var(--inner) - var(--stroke)) calc(100% - var(--inner) + var(--stroke)),
		50% calc(50% + 2 * var(--stroke)),
		calc(var(--inner) + var(--stroke)) calc(100% - var(--inner) + var(--stroke)),
		calc(var(--inner) - var(--stroke)) calc(100% - var(--inner) - var(--stroke)),
		calc(50% - 2 * var(--stroke)) 50%,
		calc(var(--inner) - var(--stroke)) calc(var(--inner) + var(--stroke))
	);
}

/* ✅ */
.clip-icon[data-icon='checkmark'] {
	/* アルファベットの L のような図形を書いてから45度傾ける */
	--ax-x: 60%;
	--ax-y: 76%;
	--stroke: 4%;
	--inner: 24%;
	clip-path: polygon(
		var(--inner) calc(var(--ax-y) - var(--stroke)),
		calc(var(--ax-x) - var(--stroke)) calc(var(--ax-y) - var(--stroke)),
		calc(var(--ax-x) - var(--stroke)) calc(var(--inner) / 5),
		calc(var(--ax-x) + var(--stroke)) calc(var(--inner) / 5),
		calc(var(--ax-x) + var(--stroke)) calc(var(--ax-y) + var(--stroke)),
		var(--inner) calc(var(--ax-y) + var(--stroke))
	);
	rotate: 45deg;
}

/* ----- プレビュー用 ----- */
._iconpreview_ {
	font-size: 40px;
	border: dashed 1px #ccc;
}
<div class="l--cluster -g:10">
  <div class="_iconpreview_">
    <span class="clip-icon" data-icon="arrow-triangle" aria-hidden="true"></span>
  </div>
  <div class="_iconpreview_">
    <span class="clip-icon" data-icon="plus" aria-hidden="true"></span>
  </div>
  <div class="_iconpreview_">
    <span class="clip-icon" data-icon="minus" aria-hidden="true"></span>
  </div>
  <div class="_iconpreview_">
    <span class="clip-icon" data-icon="arrow-caret" aria-hidden="true"></span>
  </div>
  <div class="_iconpreview_">
    <span class="clip-icon" data-icon="x" aria-hidden="true"></span>
  </div>
  <div class="_iconpreview_">
    <span class="clip-icon" data-icon="checkmark" aria-hidden="true"></span>
  </div>
</div>

* Classes without CSS are from Lism CSS.

clip-pathをなんでこう書いてるか?についての解説は図解しないといけなくて面倒なので省略していますが、需要があればがんばって追記します。

Contents