Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Диагональные фоновые css-линии, основанные на полосах

Дата добавления: 13.01.2018 - 00:58
Добавил: Buger
Количество просмотров: 323
Количество комментариев: 0
Размер файла: 1.6Kb
Рейтинг материала: 0.0 / 0
Диагональные фоновые css-линии, основанные на полосах
рейтинг 0.0
/
голосов 0
Поделись с друзьями:
Представляю вам еще одну реализацию, которая отлично впишется в фон страниц сайта. Она выполнена при помощи диагональных линий на 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>


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;
}
Добавлять комментарии могут только зарегистрированные пользователи.