CSSでひし形を描く

Html＆CSSでひし形（rhombus,diamond）を描く方法です。

ソースコード

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

<style>
.diamond {
	height: 200px;
	width: 200px;
	background: orange;
	transform: rotateX(60deg) rotateZ(45deg) translate(50px);
}
</style>

説明

1. まず200x200の正方形を作り
   
2. rotateX(60deg)で水平方向に60度回転し
   
3. rotateZ(45deg) でZ軸方向に45度回転
   

するようなイメージです。rotateX(a) は rotate3d(1, 0, 0, a) と等価です。

rotateX	CSS 関数で、要素の形を変化させずに横座標 (水平軸) の周りを回転させる変形を定義します。
rotateZ	要素の形を変化させずに Z 軸の周りを回転させる変形を定義します。

3Dを2Dで見ているのでわかりづらいと思います。以下のページが参考になりました。

CSS Transforms Module Level 2

参考リンク

• html - How would I create a title inside a diamond shape, with CSS? - Stack Overflow
• <transform-function> - CSS: カスケーディングスタイルシート | MDN
• 【CSS3】Transform（変形）関連のまとめ - Qiita
• CSS perspectiveを使ったデザイン - Qiita

clip-pathで描く

<style>
.box {
	width: 300px;
	height: 150px;
	background: red;
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
</style>

<div class="box"></div>

Photoshopいらずで切り抜き放題！clip-pathプロパティがかっこよすぎる – WPJ
https://www.webprofessional.jp/introducing-css-clip-path-property/