CSS：三角形阴影

Question

我在CSS中有这个三角形：

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 200px 200px 0 0;
  border-color: #007bff transparent transparent transparent;
}

<div class="triangle"></div>

如何在斜边线上应用1像素的阴影？

- Aral Roca

Answer 1

由于box-shadow不起作用，您必须在三角形上应用一个投影滤镜：

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 200px 200px 0 0;
  border-color: #007bff transparent transparent transparent;
  -webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5));
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5));
}

<div class="triangle"></div>

- Anselm

Answer 2

在svg中创建一个polygon，然后应用drop-shadow滤镜。

.triangle {
  width: 200px;
  color: #007bff;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .5));
}

<svg class="triangle" viewBox="0 0 100 100">
  <polygon points="0,0 100,0 0,100" fill="currentColor" />
</svg>

尝试使用语义化、有意义的HTML元素来实现形状，而不是仅依赖CSS。

- Ricky

Answer 3

您可以通过使用倾斜的渐变来实现此效果，而无需使用边框。

div {
  width: 200px;
  height: 200px;
  margin: 2em auto;
  background: linear-gradient(to bottom right, #007bff 50%, rgba(0,0,0,.5) 50%, transparent 52%);
}

<div></div>

- Paulie_D

---

虽然这段代码可以工作，但它使用了渐变而不是“真正的”投影，这使得控制阴影效果有点困难。此外，它的渲染效果不好 - 阴影被切断，因为实际的框是一个矩形。 - Anselm

Answer 4

使用这段代码对我有效：

.triangle-use-dropshadow{
content: ' ';
    width: 0;
    height: 0;
    border: 14px solid;
    border-color: #fdfdfd transparent transparent transparent;
    filter: drop-shadow(-2px -4px 2px rgba(0,0,0,0.5));
}

<div class="triangle-use-dropshadow"></div>

- Netizen 62

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Ethan