擬似要素を使ってCSSでロングシャドウを表現する

cssでロングシャドウを表現するとして、「css long shadow」などで検索すると、box-shadowを位置をずらしながら多重にかける方法で表現できるようです。

shadow01.css

.shadow {
  box-shadow: 1px 1px rgb(31, 41, 52),
              2px 2px rgb(31, 41, 52),
              3px 3px rgb(31, 41, 52),
              ...
              /* シャドウが100pxなら100まで続く */
}

ただこの方法だと、背景色を透過したシャドウを作れませんし、cssが黒魔術っぽくなってしまいます。

そこで、疑似要素を使ってシャドウを作ってみました。
実際の要素の右と下にシャドウとなる疑似要素を作成し、transform: skew()させてシャドウのように見せかけます。

サンプル

shadow02.css

.shadow {
  position: relative;
}
.shadow:before,
.shadow:after {
  content: "";
  position: absolute;
}
.shadow:before {
  width: 100px;
  height: 100%;
  top: 0;
  left: 100%;
  background-image: linear-gradient(to right, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
  transform: skew(0, 45deg);
  transform-origin: 0 0 0;
}
.shadow:after {
  width: 100%;
  height: 100px;
  top: 100%;
  left: 0;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
  transform: skew(45deg, 0);
  transform-origin: 0 0 0;
}

この方法であれば背景色を透過したシャドウを作成することができます。

しかし、sample02-02のようにシャドウを濃い色に設定すると、シャドウの繋ぎ目にある隙間の部分が目立ってしまいます。
また、box-shadowとは違い、擬似要素を作成しているので、他の要素に影響を与えることも注意が必要です。