Как реализовать декоративный элемент?

Question

Подскажите пожалуйста, как реализовать декоративные полоски таким образом:

Answer 1

Такие границы для нужного вам элемента возможно реализовать с помощью repeating-linear-gradient. Пример:

div {
width: 100%;
height: 50vh;
background: gainsboro;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-image: 
repeating-linear-gradient(-45deg,
      red,
      red 20px,
      transparent 20px,
      transparent 23px,
      blue 23px,
      blue 43px,
      transparent 43px,
      transparent 46px);
border-image-slice: 8;
}

<div></div>

БЛОГ НА HUSL

Как реализовать декоративный элемент?

Ответы (1 шт):