SVG ひし形のサンプル

SVG ひし形のサンプル

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>
2017-07-09 22:08:07

関連するサンプル

人気記事ランキング

© 2018 kipure
Top