定番
履歴

SVG 三角形のサンプル

SVG 三角形のサンプル

SVGで三角形を描くサンプルを紹介します。

ちょっとしたデザインで三角が使いたくなった時にいちいちフォトショップやイラストレーターで作成して、サーバーアップして参照するのは面倒と感じることがありませんか。

そんな時には、SVGが重宝します。

三角形は特に決まったタグは無いようなので、パスを描画することになります。

塗りつぶした三角形

<svg width="100" height="100">
    <path d="M50 0 L0 100 L100 100 Z" style="fill:red"/>
</svg>

輪郭をつけた三角形

<svg width="100" height="100">
    <path d="M50 0 L0 100 L100 100 Z" style="fill:#999;stroke:black;stroke-width:3"/>
</svg>

右向き三角形

<svg width="100" height="100">
    <path d="M0 0 L100 50 L0 100 Z" style="fill:blue"/>
</svg>

左向き三角形

<svg width="100" height="100">
    <path d="M100 0 L0 50 L100 100 Z" style="fill:green"/>
</svg>
2016-10-02 17:13:23
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top