CSS: Shadow in a triangle

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>

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.


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>

Tags:

Html

Css

Recent Posts