Масштабируемый треугольник

[Zverushka]

http://joxi.ru/TA4RU_3JTJAvSyJOwZA

Суть в том, что высота может быть разной, создать треугольник в относительных величинах нельзя.

При этом я не представляю как воспользоваться градиентом, потому что весь зеленый блок полупрозрачный.

Использовать, допустим трансформы. Но последний раз, когда я сталкивалась с ними - я помню огромные проблемы со skew вместе с rotate - идеального ромба не получится - какая-то сторона будет длиннее.

Как же это сделать?

 

[sigor]

Да можно, использовать джидайские способы (используя тот же самый transform + :before| :after )... http://jsfiddle.net/48D66/

 

Хотя в практике, лучше обойтись используя background и background-size с полупрозраной фоновой картинкой

[Bassline]

С использованием градиентов получается некрасивая лесенка http://jsfiddle.net/Msj7r/

[Zverushka]

С использованием градиентов получается некрасивая лесенка http://jsfiddle.net/Msj7r/

 

Ох ты ж и правду можно 2 слоя использовать просто и не будет нахлеста .

А вот как исправляется лесенка http://jsfiddle.net/Msj7r/2/

Нужно пару лишних процентов между бесцветным и цветным вставить .