Тренируюсь в верстке, нашел такой макет. Скажите пожалуйста, возможно ли так заполнить блок не прописываю куча линий вручную? Или это обязательно картинка? Заранее всем огромное спасибо)
Скажите пожалуйста, возможно ли так заполнить блок не прописываю куча линий вручную? Или это обязательно картинка?
Нет, это не картинка. Желаемый эффект можно получить, если комбинировать градиенты, маски и фильтры. Кода минимум и не нужно прописывать каждую линию в отдельности (конкретно блок с линиями подписан в коде):
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>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>Думаю, все-таки это реализовывается через свойство 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/