CSS | 手裏剣（SHURIKEN）の作成方法

2021-06-19CSS 図形デザイン,CSS

手裏剣の形状をCSSだけで作成する方法を紹介しています。

手裏剣の作り方

CSSの疑似要素、rotate()、skew()による回転・傾斜を利用して手裏剣の型を作成する方法です。

See the Pen CSS | SHURIKEN by yochans (@yochans) on CodePen.

動作サンプルには3つ表示されていますが、ただの色違いになりますので、サンプルコードはひとつに省略します。

<div class="shuriken-1"><div></div></div>

疑似要素のbeforeとafterで、それぞれ角度・傾斜の違うひし形を作成して重ねています。

幅広のひし形を作成するのにskew()を利用しています。

skew()の値は、傾斜の量で0deg～90degの間で指定します。
数値が大きいほど傾斜していき90degで完全に見えなくなります。
ふたつの数値とも同じ値を記入すると丁度良くなります。

rotate()では角度、-45度で横長、45度で縦長のひし形にしています。

子要素にあたるdivでは中心に円を作成しています。
この円は背景色が付いていますので、表示するコンテンツに合わせて調整が必要。

.shuriken-1 {
	width: 150px;
	height: 150px;
	position: relative;
}

.shuriken-1::before {
	content: "";
	width: 72px;
	height: 72px;
	position: absolute;
	top: 40px;
	left: 40px;
	transform: rotate(-45deg) skew(20deg, 20deg);
	background: #FF0000;
}

.shuriken-1::after {
	content: "";
	width: 72px;
	height: 72px;
	position: absolute;
	top: 40px;
	left: 40px;
	transform: rotate(45deg) skew(20deg, 20deg);
	background: #ff4d4d;
}

.shuriken-1 div {
	width: 30px;
	height: 30px;
	position: absolute;
	top: 60px;
	left: 60px;
	border-radius: 50%;
	background: #FFF;
	z-index: 1;
}