Как сделать пропорциональный div?

Question

[Space]

Нужно чтобы два таких косых блока растягивались на странице с шириной 100%.

.header-left{
	width: 70%;
   	height: 0px;
   	border-top: 100px solid #F00;
        border-right: 100px solid transparent;
 	float: left;
	margin-right: -100px;
}

.header-right{
	width: 30%;
 	height: 0; 
 	border-bottom: 100px solid #ccc; 
	border-left: 100px solid transparent;
	float:left;
}

Но так не получается, потому что приходится делать еще минусовой отступ, чтобы блоки были соединены. Каким образом можно этого добиться? К тому же, если делать блоки таким способом, то не могу увеличить их по высоте.

Answer 1

[holfza]

https://jsfiddle.net/mrqkd33w/2/

Comments

[Space]

А что делает эта строчка filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1111', endColorstr='#000000',GradientType=1 ); ?

[holfza]

htmlbook.ru/css/filter/gradient

[Space]

holfza: я понимаю, но убирая ее -ничего не меняется.

[holfza]

Cosmos: Так filter чисто для IE. Если не нужна поддержка - можно убрать.

[Space]

holfza: Жаль в css нет переменных, изменять много значений цвета придется... спасибо большое за решение.

[holfza]

www.colorzilla.com/gradient-editor я вот этим генератором пользуюсь.. на примере выше: c2n.me/3oZ5cY1

[Space]

holfza: подскажите еще такое дело пожалуйста, слева у меня красный фон, справа черный. Но нужно чтобы эти два блока были фиксированной шириной - 700px и 300px соответственно, но чтобы красный цвет бесконечно тянулся влево, а черный вправо. Таким образом я зафиксирую в одном месте линию перехода двух цветов.

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

Answer 2

[Pavel Torbeev]

Как вариант, такое решение
https://jsfiddle.net/mrqkd33w/

Comments

[Space]

Спасибо, но при увеличении высоты происходит https://jsfiddle.net/mrqkd33w/1/

[Pavel Torbeev]

Cosmos: нужно пропорционально увеличивать и высоту блока :before