SVGで作った三角形に影をつける方法【box-shadowでの表現を再現】

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

SVGで三角形を実装する方法を知りたい
SVGで実装した三角形に影をつけたい
HTML、CSSで実装した下向きの三角形の形に沿ってbox-shadowをつけたいけどうまくいかない

という方のお悩みを解決します！

この記事で紹介する「SVGで三角形を作る方法」と「SVGの三角形に影をつける方法」を実践すれば、IE+10にも対応した影を落とせるようになります！

なぜなら、ぼくはその方法で実際にLP制作案件で三角形の形に沿った影をつけることができたからです。

それでは見て参りましょう〜！

SVGで三角形を作る方法
SVGの三角形に影をつける方法
参考記事
まとめ

SVGで三角形を作る方法

まずは、SVGで三角形を作ります！

polygon要素を使うと以下のように三角形を表現することができます。

See the Pen
rNVGXod by 石森裕也 (@yuyaphotograph)
on CodePen.

polygon要素のpoints属性の数値を見てみましょう。

index.html

<polygon points="50,50 0,0 100,0" fill="#5bc8ac"/>

前2つの「50,50」の値を変更すると三角形の辺の長さを調整することができます。

例えば、下向きの潰れ気味の二等辺三角形にしたい場合には後者の値を下げることで表現できます。

See the Pen
GRJMVeg by 石森裕也 (@yuyaphotograph)
on CodePen.

三角形の色を指定しているのはfill属性です。

例えば、シンプルに白の三角形にしたい場合は、「fill=”#fff”」としてやりましょう。

SVGの三角形に影をつける方法

SVGで三角形を作る方法が分かったところで本題の影をつける方法を見ていきましょう。

完成形がこちらとなります。

See the Pen
QWbOLjM by 石森裕也 (@yuyaphotograph)
on CodePen.

box-shadowで影を落とす時と同様に影をつけることで出来ているかと思います。

影の濃淡や色を調整したい場合は、feColorMatrix要素のvalues属性の値をいじります。

影の長さを調整したい場合は、feGaussianBlur要素のstdDeviation属性の値をいじります。

コードを見てみましょう。

index.html

<feColorMatrix in="SourceAlpha" result="ChangeAlpha" type="matrix" values="0 0 0 0 0
                                                                                           0 0 0 0 0
                                                                                           0 0 0 0 0
                                                                                           0 0 0 .8 0"/>
                <feGaussianBlur in="ChangeAlpha" result="GaussianBlur" stdDeviation="2"/>

上記コードで表現しているのは以下のbox-shadowと同じものです。

index.css

box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);

では例えば、このような緑色の影をつけたい場合はどうすればいいのか。

index.css

box-shadow: 0 0 2px rgba(91, 200, 153, 0.8);

rgbの各値を255で割った値をfeColorMatrix要素のvalues属性に指定してやります。

91 / 255 = 0.3568
200 / 255 = 0.7843
153 / 255 = 0.6

index.html

<feColorMatrix in="SourceAlpha" result="ChangeAlpha" type="matrix" values="0 0 0 0 0.3568
                                                                                           0 0 0 0 0.7843
                                                                                           0 0 0 0 0.6
                                                                                           0 0 0 .8 0"/>
                <feGaussianBlur in="ChangeAlpha" result="GaussianBlur" stdDeviation="2"/>

こちらサンプルです。なかなかかっこいい三角形になりましたね笑

See the Pen
xxGPKjK by 石森裕也 (@yuyaphotograph)
on CodePen.

また、Google Chromeではデフォルトでsvg{overflow:hidden;}が指定されている関係で、以下のコードを書かないと三角形の影が表示されない現象が起きるので注意してください。

index.css