Estoy luchando con los triángulos sensibles: necesito crear un triángulo que se ajuste al ancho de la pantalla, pero su ancho no cambia cuando el ancho de la pantalla se reduce.

0
CodeNewbee 15 dic. 2016 a las 11:02

2 respuestas

La mejor respuesta

Se me ocurre una solución que agrega dos triángulos (cada uno con un ancho del 50%) y usando un degradado lineal:

#triangle {
  overflow: auto;
}

#triangle span {
  width:50%;
  height: 40px;
  float: left;
}

#triangle span:first-child {
  background: linear-gradient(to top left, orange 50%, transparent 50%);
}

#triangle span:nth-child(2) {
  background: linear-gradient(to top right, orange 50%, transparent 50%);
}
<div id="triangle">
  <span></span><span></span>
</div>

Para hacer que el triángulo mantenga el ancho inicial, puede agregar los siguientes js:

var triangle = document.getElementById('triangle');
var width = triangle.offsetWidth;
triangle.style.setProperty('width', width+"px");

Consulte JSFiddle para ver una demostración.

0
Marvin 15 dic. 2016 a las 08:31

Probar esto

background-size: 100% 150px;
1
Adrian Bobrowski 15 dic. 2016 a las 08:05