Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Диагональные фоновые css-линии, основанные на полосах
Дата добавления: 13.01.2018 - 00:58
Категория: Фоны для сайтов / Background's, Хаки / Дополнения
Добавил: Buger
Количество просмотров: 323
Количество комментариев: 0
Размер файла: 1.6Kb
Рейтинг материала: 0.0 / 0
БЕСПЛАТНО
рейтинг
0.0
/
голосов
0
Поделись с друзьями:
Представляю вам еще одну реализацию, которая отлично впишется в фон страниц сайта. Она выполнена при помощи диагональных линий на CSS.
HTML разметка
CSS стили
HTML разметка
Код
<div class="container">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
CSS стили
Код
.container {
margin-top: 20vh;
background: linear-gradient(90deg, #777bf8, #68d4f8 200%);
width: 100%;
height: 50vh;
transform: skewY(-12deg);
position: absolute;
}
.rect1 {
margin: 0;
width: 30vw;
background: white;
opacity: 0.1;
height: 5vh;
float: left;
}
.rect2 {
margin: 0;
width: 20vw;
background: white;
opacity: 0.2;
height: 5vh;
float: left;
clear: left;
}
.rect3 {
margin: ;
width: 20vw;
background: white;
opacity: 0.5;
height: 5vh;
float: right;
}
.rect4 {
margin: 0;
width: 30vw;
background: white;
opacity: 0.1;
height: 5vh;
float: right;
clear: right;
}
margin-top: 20vh;
background: linear-gradient(90deg, #777bf8, #68d4f8 200%);
width: 100%;
height: 50vh;
transform: skewY(-12deg);
position: absolute;
}
.rect1 {
margin: 0;
width: 30vw;
background: white;
opacity: 0.1;
height: 5vh;
float: left;
}
.rect2 {
margin: 0;
width: 20vw;
background: white;
opacity: 0.2;
height: 5vh;
float: left;
clear: left;
}
.rect3 {
margin: ;
width: 20vw;
background: white;
opacity: 0.5;
height: 5vh;
float: right;
}
.rect4 {
margin: 0;
width: 30vw;
background: white;
opacity: 0.1;
height: 5vh;
float: right;
clear: right;
}
