CSS: Shadow in a triangle

Question

I have this triangle in 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>

How can I apply a 1px shadow on the hypotenuse line?

Answer 1

Since box-shadow won't work, you have to apply a drop shadow filter on the triangle:

.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

You can make this without using borders by employing an angled gradient.

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>

Answer 3

Create a polygon in an svg, then apply a drop-shadow filter.

.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>

Try to use semantic, meaningful HTML elements instead of relying purely on CSS for shapes.