CSS: sombra en un triángulo

Después de tanto luchar pudimos hallar el arreglo de esta cuestión que muchos de nuestros usuarios de este sitio web tienen. Si deseas aportar algún detalle no dejes de aportar tu conocimiento.

Solución:

Ya que box-shadow no funcionará, debe aplicar un filtro de sombra en el triángulo:

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

puedes hacer esto sin usar bordes mediante el empleo de un gradiente en ángulo.

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

Crear un polygon en un svgluego aplique un drop-shadow filtrar.

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

Intente usar elementos HTML semánticos y significativos en lugar de confiar únicamente en CSS para las formas.

Si sostienes alguna desconfianza y forma de aclarar nuestro tutorial puedes añadir una explicación y con deseo lo analizaremos.

---

---

Utiliza Nuestro Buscador