なんにもない日の頭の中はこんなもんだったりする

CSSだけで、線の下に、三角の影をつくる

CSSだけで、線の下に、三角の影をつくる

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

サンプル

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

ポイント

  • transformで三角部分を作る。
    ※ 四角を45度回転させる
  • box-shadowで影(シャドウ)を作る。
    ※ filter: drop-shadow()はIEでNGのため
  • z-indexで重なりの順番を調整する。
    ※ 影(シャドウ)のはみ出し対策