Aral Roca Aral Roca - 2 months ago 11
CSS Question

How to apply a drop shadow on a triangle in CSS?

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

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>