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

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

サンプル

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

ポイント

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