【CSS】ラインの下に三角の影をつくる

  • 2018.10.26

ラインの下に、三角の影をつくる。
なかなか難しい。
全体の背景に色がつくとなかなかややこしい。

サンプル

See the Pen
線の下に、三角の影をつくる
by 125naroom (@125naroom)
on CodePen.

ポイント

  • transformで三角部分を作る。
    ※ 四角を45度回転させる
  • box-shadowで影(シャドウ)を作る。
    ※ filter: drop-shadow()はIEでNGのため
  • z-indexで重なりの順番を調整する。
    ※ 影(シャドウ)のはみ出し対策
Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

Studio Willen
  • 2021.03.01New
  • Studio Willen
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
Studio Willen
  • 2021.03.01New
  • Studio Willen
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
余白のある家だなと思います/窓の家と生活
寝返り、できた