Question

我在CSS中有这个三角形：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

由于box-shadow无法使用，您必须在三角形上应用投影滤镜：

＆＃13;

.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));
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用倾斜渐变来制作而不使用边框。

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

Answer 3

在polygon中创建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来形成形状。

如何在CSS中的三角形上应用投影？

3 个答案: