[SOLUCIONADO] ¿Triángulo relativo con CSS?

[guardarmicorreo]

En varias páginas he visto que para lograr hacer un triángulo con CSS

hacen lo siguiente

Código CSS:

#triangle-up { 
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
 

Fuente

En todos los ejemplos que he visto, para hacer triángulos utilizan la unidad px para definir el tamaño del borde.

Esto estaría bien si no fuera porque mi blog personal lo estoy haciendo responsive design, al tener un pixel perfect en el triángulo va a afectar a la hora de redimensionar con media query.

He probado a hacer los bordes con porcentajes y rem, pero no es válido, no me funciona.

¿Alguien sabe cómo solucionar este inconveniente de CSS?

[pzin]

No se puede usar la misma técnica exactamente para que el triángulo tenga una medida relativa.

Podrías usar un gráfico SVG, o un canvas incluso. Luego tienes esta opción para hacerlo puramente con CSS.

[guardarmicorreo]

muchas gracias!! :D