Возможно ли на CSS реализовать прямоугольник как на картинке (куча линий заполнящих блок)

Question

Тренируюсь в верстке, нашел такой макет. Скажите пожалуйста, возможно ли так заполнить блок не прописываю куча линий вручную? Или это обязательно картинка? Заранее всем огромное спасибо)

Answer 1

Думаю, все-таки это реализовывается через свойство background-image.

Но если потренироваться, то можно сделать что-то похожее с помощью градиента на заднем фоне. Правда там будет отличаться границы фона и также получится очень громоздкий код для этого.

Вот код только для двух линий:

background: linear-gradient(135deg, rgba(164,57,198,1) 0%, rgba(164,57,198,1) 38%, rgba(51,51,51,1) 38%, rgba(164,57,198,1) 40%, rgba(164,57,198,1) 64%, rgba(51,51,51,1) 64%, rgba(164,57,198,1) 66%);

Есть также сайт на котором можно поиграться с градиентом: https://cssgradient.io/

Answer 2

upd: UModel дал более подходящий ответ

Точно такие же полоски чисто на css сделать не получиться, т.к. у каждой полоски имеется свой градиент.

Самый близкий вариант, который у меня вышел:

.stripes-bg {
  position: relative;
}

.stripes-bg:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    3px 3px
    repeating-linear-gradient(
      135deg,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 1) 10px,
      rgba(0, 0, 0, 0) 10px,
      rgba(0, 0, 0, 0) 30px
    );
  background-repeat: no-repeat;
  filter: blur(3.5px);
}

.stripes-bg:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    repeating-linear-gradient(
      135deg,
      rgba(158, 18, 206, 1),
      rgba(158, 18, 206, 1) 10px,
      rgba(0, 0, 0, 0) 10px,
      rgba(0, 0, 0, 0) 30px
    );
    background-repeat: no-repeat;
}


/************/

.block1 {
  width: 100px;
  height: 100px;
  margin: 10px;
}

.block2 {
  width: 200px;
  height: 50px;
  margin: 10px;
}

<div class="block1 stripes-bg"></div>
<div class="block2 stripes-bg"></div>

MDN | repeating-linear-gradient

Answer 3

Скажите пожалуйста, возможно ли так заполнить блок не прописываю куча линий вручную? Или это обязательно картинка?

Нет, это не картинка. Желаемый эффект можно получить, если комбинировать градиенты, маски и фильтры. Кода минимум и не нужно прописывать каждую линию в отдельности (конкретно блок с линиями подписан в коде):

body {
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: 0% 0% / auto no-repeat linear-gradient(#7c36ce 0 calc(50% - 150px), #c43ec3  calc(50% + 150px) 100%);
}

.wrapper {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  height: 248px;
  width: 460px;
  padding: 0 60px 0 20px;
  box-sizing: border-box;
}
/* Полосатый фон */
.strips {
  position: absolute;
  top: 0; left: 0; z-index: -1;
  height: 100%; width: 100%;
  filter: drop-shadow(0 5px 1px #0003);
}
.strips::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 100%;
  background-image: linear-gradient(#9f12d0, #bc3dc4);
  -webkit-mask-image: repeating-linear-gradient( 135deg, #0000 0 9.5px, #000f 10.5px 15.5px, #0000 16.5px);
  mask-image: repeating-linear-gradient( 135deg, #0000 0 9.5px, #000f 10.5px 15.5px, #0000 16.5px);
}

.text_1 {
  position: relative;
  margin: 34px 0 0;
  font: bold 32px/1em Arial Black;
  letter-spacing: -0.5px;
  color: #fff;
}
.text_1::after {
  content: '';
  position: absolute;
  top: -85%; left: 98%;
  height: 70px; width: 60px;
  background-image: url('https://cdn-icons-png.flaticon.com/128/5946/5946948.png');
  background-size: cover;
  filter: invert(1);
}

.text_2 {
  margin: 15px 0 0;
  padding: 8px 14px 12px 0;
  box-sizing: border-box;
  font: 18px/1.1em Segoe UI;
  letter-spacing: 0.4px;
  text-align: right;
  color: #5b0753;
  background-color: #d724db;
}

.text_3 {
  margin: 9px 0 0;
  align-self: start;
  font: italic 16px/1em Segoe UI;
  letter-spacing: 1px;
  color: #fff;
}

.button {
  margin: 20px 0 0;
  padding: 12px 30px;
  border-radius: 1000px;
  font: bold italic 16px/1em Segoe UI;
  letter-spacing: 0.4px;
  color: #fff;
  background-color: #d020b4;
  filter: drop-shadow(0 5px 1px #0004);
}

<div class="wrapper">
  <div class="strips"></div>
  <div class="text_1">Будь всегда на связи</div>
  <div class="text_2">MyPhone - лучший интернет - магазин телефонов в России</div>
  <div class="text_3">Делай покупки, сидя на диване</div>
  <div class="button">Купить сейчас</div>
</div>

БЛОГ НА HUSL

Возможно ли на CSS реализовать прямоугольник как на картинке (куча линий заполнящих блок)

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