How to apply shadow on a triangle in CSS?

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>

Run codeHide result

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

Answer 1

Since it box-shadowwill not work, you should apply the shadow shadow filter in 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>

Run codeHide result

Answer 2

You can do this without using borders using an angular 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>

Run codeHide result

Answer 3

Honestly, I don’t know why people keep using these shapes when you can write semantic HTML using SVG .

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

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

Run codeHide result