Как сверстать этот блок?

Question

[Евгений Нечепуренко]

Всем привет!
Есть задача сверстать блок с каскадами, как на изображении, но чтобы это было адаптивно и одинаково отображалось на всех устройствах.
Пробовал при помощи border, но, к сожалению, этому свойству нельзя задать width:100%;
У кого какие идеи будут?

Answer 1

[Евгений Нечепуренко]

Разобрался с помощью svg. Вот код, может пригодится кому.

.block:before {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23eefcff;' /%3E%3C/svg%3E");
    left: 0;
    top: -120px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: '';
    display: block;
    height: 120px;
    position: absolute;
    width: 100%;
}
.block:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23eefcff;' /%3E%3C/svg%3E");
    right: 0;
    bottom: -120px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: '';
    display: block;
    height: 120px;
    position: absolute;
    width: 100%;
    transform: rotateX(180deg);
}

В свойстве background-image можно задать цвет любой, оставив "%23" в этом:"%23eefcff", а "eefcff" заменить на необходимый.

Comments

[Фёдор Ананин]

Добавил в закладки, спасибо! Отличное решение!

[VaskoGood]

Ребята, а как сделан SVG в этом примере? в каком то редакторе? Это (viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3) делаеться вручную?

Answer 2

[riot26]

С помощью SVG ?

Comments

[Евгений Нечепуренко]

Тоже интересно, спасибо!

Answer 3

[Олег]

Псевдоэлементы + transform

Comments

[Евгений Нечепуренко]

Пробовал. Transform 3deg переворачивает элемент, но справа в верхнем углу остается просвет в пару пикселей.

Answer 4

[Артур]

https://habrahabr.ru/post/126207/

Answer 5

[weredy]

Через псевдоэлемент и transform:
JSFiddle