用途
新着
履歴
分類

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>
公開 2019-07-30 21:41:30
このページの二次元コード
SVG ひし形のサンプル

人気のサンプル

search -  category -  about
© 2024 kipure
Top