Не могу понять каким образом создавать подобные бэкграунды не используя заранее заготовленное изображение.
2 ответа
Что-то похожее
.variant1,.variant2{
height:50vh;
border:1px solid;
}
.variant1{
background:repeating-linear-gradient(-45deg, #6ac4e6 200px,#61c0e7 250px);
}
.variant2{
background:linear-gradient(-45deg,#6ac4e6 47%,#61c0e7 50%);
background-size:50px 50px;
}
<div class="variant1"></div>
<div class="variant2"></div>
Без изображений создать данный фон крайне сложно: создается много div-ов на заднем плане через for на js с абсолютной позицией на заднем плане. Паттерн (форма секции) создается через свойство border. Альтернатива: делается одна секция фона и задается фоновым изображением:
body{
background-image: url("1.png");
}
секция повторяется много раз и закрывает фон. Настройка повторения: св-во repeat в css. Можно самим создать данный паттерн: Сайт PatternNinja
-
Данное решение здесь не подходит, это все через css можно сделать, т.к. "изображений" здесь фактически нет. – DaemonHK 29 янв '18 в 7:55
-
@DaemonHK Сделать треугольники просто, сложно заполнить ими фон (через createElement в цикле) и задать им правильную позицию. – AeroAppLabs 29 янв '18 в 8:29
-