CSS | ひし形(Rhombus)の作り方

2021-06-17CSS 図形デザイン,CSS

CSSでひし形を作成する方法

CSSでひし形をtransformプロパティを使って作成する方法と、clip-pathのpolygonを使って作成する方法の2通りを紹介しています。

ひし形の作り方

transformプロパティを使ったひし形の作成方法を紹介しています。

See the Pen CSS Rhombus(transform) by yochans (@yochans) on CodePen.

HTMLでは高さと横幅の違う3タイプのひし形を作成するdivタグを使っています。

<div class="container">
	<div class="rhombus-1"></div>
	<div class="rhombus-2"></div>
	<div class="rhombus-3"></div>
</div>

ひし型はtransformのrotate()で回転、skew()で傾斜変形させて作成しています。

サンプルコード内のrotate()は45degで右回りに45度回転、-45degで左回りに45度回転しています。

回転した方向によって、skew()による傾斜の方向もかわりますので、それで横に広いひし形、縦に広いひし型を表現しています。

.rhombus-1{
	width: 100px;
	height: 100px;
	transform: rotate(45deg);
	background: #ffd700;
}

.rhombus-2{
	width: 100px;
	height: 100px;
	transform: rotate(45deg) skew(10deg, 10deg);
	background: #ffd700;
}

.rhombus-3{
	width: 100px;
	height: 100px;
	transform: rotate(-45deg) skew(10deg, 10deg);
	background: #ffd700;
}

ひし形の作り方(枠線、ラインだけバージョン)

背景色ではなく、枠線・ラインだけのひし形を作成する方法です。

See the Pen CSS Rhombus(line only) by yochans (@yochans) on CodePen.

<div class="container">
	<div class="rhombus-1"></div>
	<div class="rhombus-2"></div>
	<div class="rhombus-3"></div>
</div>

ひし形はborderによる単色使わずに作成できますので、そのまま背景色ではなくborderを指定する事で枠線のみのバージョンを作成できます。

「box-sizing: border-box」で線を内側に入れる事で、位置ずれなどを防ぐ事ができます。

.rhombus-1{
	width: 100px;
	height: 100px;
	transform: rotate(45deg);
	border: 2px solid #000;
	box-sizing: border-box;
}

.rhombus-2{
	width: 100px;
	height: 100px;
	transform: rotate(45deg) skew(10deg, 10deg);
	border: 2px solid #000;
	box-sizing: border-box;
}

.rhombus-3{
	width: 100px;
	height: 100px;
	transform: rotate(-45deg) skew(10deg, 10deg);
	border: 2px solid #000;
	box-sizing: border-box;
}

ひし形の作り方(polygonバージョン)

clip-pathプロパティのpolygonを使ったひし形の作り方を紹介しています。

See the Pen CSS Rhombus(Polygon) by yochans (@yochans) on CodePen.

polygonバージョンでも高さと横幅の違う3タイプのひし形を作成するdivタグを用意しました。

<div class="container">
	<div class="rhombus-1"></div>
	<div class="rhombus-2"></div>
	<div class="rhombus-3"></div>
</div>

polygonではパーセントによる指定になりますので、要素の横幅(=編の長さ)と高さを目的のひし形のサイズに合わせておけばOKです。

単純にwidthとheightに目的の大きさを指定します。

.rhombus-1{
	width: 100px;
	height: 100px;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	background: #00bfff;
}

.rhombus-2{
	width: 100px;
	height: 150px;
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	background: #00bfff;
}

.rhombus-3{
	width: 150px;
	height: 100px;
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	background: #00bfff;
}

polygonの指定順は、上側の頂点を始点として右、下、左の順に指定しています。
終点から始点への繋ぎ指定は省略可能です。

2021-06-17CSS 図形デザイン,CSS

Posted by Yousuke.U