CSS 如何实现长投影效果？

Question

CSS 如何实现长投影效果？

仓乃文 · Accepted Answer

长投影可以通过元素的两个伪元素配合 transform: skew() 变换和渐变色实现，无需多层阴影叠加，性能更好。

```css
.long-shadow {
  position: relative;
}

.long-shadow::before,
.long-shadow::after {
  content: ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: top left;
}

.long-shadow::before {
  transform: skewY(45deg);
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);
}

.long-shadow::after {
  transform: skewX(45deg);
  background: linear-gradient(to right, rgba(0,0,0,0.3), transparent);
}
```

补充说明：
- 通过 skew 变换创建平行四边形模拟投影方向
- 渐变色从实色到透明模拟投影衰减效果
- 比多层 box-shadow 性能更好，适合矩形元素的长投影场景
- 两个伪元素分别处理水平和垂直方向的投影