Здравствуйте. На сайте необходимо реализовать вот такой фон:
Трудность составляет то, что фон должен тянуться на всю ширину страницы. Например, первый голубой блок должен слева уменьшаться по высоте, а справа увеличиваться. Попытался сделать верхнюю часть. Но мне кажеться, что код ужасно нерационален. Как посоветуете реализовать это? Желательно с примерами и на html+css.
<body>
<div class="bg1"><div></div></div>
</body>
body{
background: #31A8E2;
overflow-x: hidden;
height: 2000px;
}
.bg1 {
margin-top: -1670px;
width: 100%;
position: absolute;
-moz-transform: rotate(90deg); /* Для Firefox */
-ms-transform: rotate(90deg); /* Для IE */
-webkit-transform: rotate(90deg); /* Для Safari, Chrome, iOS */
-o-transform: rotate(90deg); /* Для Opera */
transform: rotate(90deg);
}
.bg1 div {
width: 660px;
background: white;
height: 5000px;
-webkit-transform: skew(-9.6deg);
-moz-transform: skew(-9.6deg);
-o-transform: skew(-9.6deg);
}
