transform: rotate(45deg) と何が違う？

回転は要素ごと中身（テキスト）も45度傾きます。clip-pathは外形だけを菱形に切り抜くので、中のテキストはまっすぐ表示できます。

正方形のきれいな菱形にするには？

要素の幅と高さを同じにすると正方形ベースの菱形になります。aspect-ratio: 1 / 1 を指定すると簡単です。

CSS 菱形（ダイヤ）の作り方｜clip-pathでひし形（コピペ）

菱形（ひし形）は clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) で作れます。transform: rotate(45deg) と違い中のテキストは傾かずまっすぐのまま、外形だけダイヤ型にできます。アイコン枠やバッジに使えます。下にコピペ用コードを用意しました。

菱形（正方形ベース）

DIA

CSS

.diamond {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

縦長の菱形

DIA

CSS

.diamond-tall {
  width: 120px;
  height: 180px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

ポイントと注意点

rotate との違い：clip-path は外形だけ切り抜くので、中のテキストやアイコンは傾きません。
縦横比で形が変わる：同じコードでも要素の幅・高さの比で菱形の縦横が変わります。正方形なら正菱形になります。
太さの調整：頂点を 50% 0 から 50% 10% のように動かすと角の鋭さが変わります。微調整は clip-path ジェネレーターの「多角形」が便利です。

菱形（正方形ベース）

CSS

縦長の菱形

CSS

ポイントと注意点

関連