CSS | ひし形（Rhombus）の作り方
CSSでひし形をtransformプロパティを使って作成する方法と、clip-pathのpolygonを使って作成する方法の２通りを紹介しています。
ひし形の作り方
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;
}新しいサイト「Material Box」にて更に多くの図形・マーク・アイコンデザインを紹介しています。
CSS – ひし形 | Material Box
ひし形の作り方（枠線、ラインだけバージョン）
背景色ではなく、枠線・ラインだけのひし形を作成する方法です。
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の指定順は、上側の頂点を始点として右、下、左の順に指定しています。
終点から始点への繋ぎ指定は省略可能です。