Как можно сверстать такой фон квадратами с расстоянием между этими квадратами и продолжающимся переходящим градиентом? Причем расстояния между квадратами должно быть прозрачными. Возможно ли?
-
1На чистом CSS - пока нельзя. HTML+CSS - это "портянка" из пустых элементов. Возможно, что SVG обладает такими возможностями. Можно генерировать на JS. Но, опять же, насколько это должно быть адаптивным. Овчинка выделки не стоит. Имхо, проще картинкой .PNG– UModeL25 мар 2020 в 1:20
2 ответа
Приём основан на применении двух css-масок: одна непосредственно к элементу (или псевдоэлементу) с фоном, а вторая под другим углом - к родителю.
*{
box-sizing: border-box;
}
body{
margin:0;
font-family: sans-serif;
font-size: 40px;
}
.section{
min-height: 100vh;
position: relative;
text-align: center;
padding: 20px;
color:gold;
text-shadow: 0 0 2px #000;
}
.section__bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
-webkit-mask: repeating-linear-gradient(-45deg,transparent 0,transparent 10px,white 10px, white 50px);
}
.section__bg:before{
content: '';
display:block;
width:100%;
height:100%;
background: linear-gradient(to right,red,purple);
-webkit-mask: repeating-linear-gradient(45deg,transparent 0,transparent 10px,white 10px, white 50px)
}
.section__content{
position: relative;
z-index: 1;
}
<div class="section">
<div class="section__bg"></div>
<div class="section__content">
<h1>Тра та та</h1>
</div>
</div>
Это можно реализовать так -
1) линейный градиент для окрашивания квадрата а stroke-width это и есть расстояние между ромбами
2) узор - что бы залить одним ромбом весь квадрат
3) маска - что бы вырезать этот ромб из этого квадрата
4) что бы убрать зазоры между body и svg достаточно для body написать margin: 0
svg собирал руками без векторных редакторов
на выходе получаем вот это:
<svg viewBox="0 0 900 500" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="lg">
<stop stop-color="#f47e73" stop-opacity="90%" offset="10%"/>
<stop stop-color="#3a3769" stop-opacity="90%" offset="90%"/>
</linearGradient>
<pattern id="ptn" width="18.5%" height="34.5%" viewBox="0 0 50 50">
<path d="M25,0 50,25 25,50 0,25z" fill="none" stroke="blue" stroke-width="8"/>
</pattern>
<mask id="msk">
<rect width="900" height="500" fill="#fff"/>
<rect width="900" height="500" fill="url(#ptn)"/>
</mask>
</defs>
<rect width="900" height="500" fill="url(#lg)" mask="url(#msk)"/>
</svg>