CSS | ダイヤモンド型（Diamond）の作り方

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

CSSでダイヤモンド型を、疑似要素を使って作成する方法と、clip-pathのpolygonを使って作成する方法と、2タイプの方法を紹介しています。

ダイヤモンド型の作り方

CSSの疑似要素を使ってダイヤモンド型を作成する方法です。

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

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

ダイヤモンドの形状は、beforeには上の部分となる台形と、afterに下の部分となる逆三角形を作成して合わせています。

台形のサイズを変更するにはborder-widthの指定で0、左端からの距離、高さ、右端からの距離として調節します。

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

.diamond-1::before {
	content: "";
	width: 100px;
	position: absolute;
	border-style: solid;
	border-color: transparent transparent #FF5252 transparent;
	border-width: 0 25px 40px 25px;
	box-sizing: content-box;
}

.diamond-1::after {
	content: "";
	position: absolute;
	top: 40px;
	border-style: solid;
	border-color: #FF5252 transparent transparent transparent;
	border-width: 80px 75px 0 75px;
}

ダイヤモンド型の作り方（Polygonバージョン）

clip-pathプロパティのpolygonを使ったダイヤモンド型の作り方です。

See the Pen CSS | Diamond（Polygon） by yochans (@yochans) on CodePen.

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

polygonの指定順序は、左上辺の始点から順に時計回りで指定しています。
また、終点と始点をつなぐ指定は省略しています。

要素のwidthとheightでサイズが調整されている事を前提に指定しています。

.diamond-1 {
	position: relative;
	width: 150px;
	height: 120px;
	background: #1e90ff;
	clip-path: polygon(20% 0%, 80% 0%, 100% 30%, 50% 100%, 0% 30%);
}