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

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

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

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

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

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

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

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

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
svg {
  overflow: visible;
}

参考記事

参考 IE10+にも対応したCSSで作る吹き出しの三角形部分に影を適用するSPYWEB

まとめ

今まで「before要素で三角形実装してた!」という方も今回紹介したSVGで作る三角形ぜひ試してみてください。

box-shadowのかわりにfilter drop-shadowを使って実装することもできますが、IEに対応していないのでSVGで作るほうがベストかなと思いました。

一日でも早くIEがなくなることを願っています笑

「CSSで普通に三角形を実装する方法が知りたい!」という方は、以下の記事で解説しているのでチェックしてみてください〜!

CSSで三角形を作る方法【左上・右上・右下・左下自由自在に配置】CSSで三角形を作る方法【左上・右上・右下・左下自由自在に配置】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です