如何在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>

如何在斜边线上应用1px阴影？

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>

Answer 2

polygon在 an 中创建一个svg，然后应用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 来绘制形状。

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>