Фон квадратами с расстоянием между ними и градиентом

Question

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

Answer 1

Это можно реализовать так -

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>

Answer 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>

БЛОГ НА HUSL

Фон квадратами с расстоянием между ними и градиентом

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