SVGでひし形、ダイヤを描くサンプルを紹介します。箇条書きやアイキャッチによく使われますが、画像をいちいち作るのは面倒です。SVGにもひし形を簡単に描けるようなタグはありません。そんな時はこのコードを使って数値を変えてカスタマイズして使ってください。
正方形のひし形
<svg width="100" height="100">
<path d="M50 0 L0 50 L50 100 L100 50 Z" style="fill:red"/>
</svg>ひし形の枠付き
<svg width="100" height="100">
<path d="M50 0 L0 50 L50 100 L100 50 Z" style="fill:#999;stroke:black;stroke-width:3"/>
</svg>細身のひし形
<svg width="100" height="100">
<path d="M50 0 L0 50 L20 100 L80 50 Z" style="fill:blue"/>
</svg>太身のひし形
<svg width="100" height="100">
<path d="M50 20 L0 50 L50 80 L100 50 Z" style="fill:green"/>
</svg>
