Как создать фон с треугольными формами?

Question

Как показано на рисунке выше, на фоне есть треугольники похожих, но разных оттенков цвета.

Мне удалось получить тот же цвет, который

#4C27B3

https://codepen.io/JoyFulCoding/pen/EzXowL

Как этого эффекта можно достичь с помощью CSS?

Answer 1

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

Вот пример на случай, если вы хотите иметь повторяющийся узор.

Я буду использовать другой цвет, чтобы вы могли легко понять форму:

body {
  margin:0;
  height:100vh;
  background:
    linear-gradient( 45deg, red    calc(0.7072 * 50px),transparent 0),
    linear-gradient( 45deg, black  calc(0.7072 * 50px),transparent 0)  50px -50px,
    linear-gradient(-45deg, blue   calc(0.7072 * 50px),transparent 0),
    linear-gradient(-45deg, orange calc(0.7072 * 50px),transparent 0) -50px -50px,
    linear-gradient(-225deg,green  calc(0.7072 * 50px),transparent 0),
    linear-gradient(-225deg,pink   calc(0.7072 * 50px),transparent 0)  50px  50px,
    linear-gradient(225deg, yellow calc(0.7072 * 50px),transparent 0),
    linear-gradient(225deg ,purple calc(0.7072 * 50px),transparent 0) -50px  50px;
    
  background-size:100px 100px;
}

Затем вы можете оптимизировать его с помощью переменных CSS:

body {
  --d:100px; /* Dimension */
  --g:calc(0.7072 * var(--d)/2),transparent 0; /* 0.707 = cosinus(45deg)*/
  background:
    linear-gradient( 45deg, red    var(--g)),
    linear-gradient( 45deg, black  var(--g))  calc(1 * var(--d)/2) calc(-1 * var(--d)/2),
    linear-gradient(-45deg, blue   var(--g)),
    linear-gradient(-45deg, orange var(--g))  calc(-1 * var(--d)/2) calc(-1 * var(--d)/2),
    linear-gradient(-225deg,green  var(--g)),
    linear-gradient(-225deg,pink   var(--g))  calc(1 * var(--d)/2)  calc(1 * var(--d)/2),
    linear-gradient(225deg, yellow var(--g)),
    linear-gradient(225deg ,purple var(--g))  calc(-1 * var(--d)/2)  calc(1 * var(--d)/2);
    
  background-size:var(--d) var(--d);
  
  margin:0;
  height:100vh;
}

Наконец, вы можете использовать окраску hsl(), чтобы создать рисунок того же цвета, как вы хотите:

body {
  --d:100px; /* Dimension */
  --g:calc(0.7072 * var(--d)/2),transparent 0; /* 0.7072 = cosinus(45deg)*/
  --c:256, 64%; /* Base color */
  background:
    linear-gradient( 45deg, hsl(var(--c),20%)  var(--g)),
    linear-gradient( 45deg, hsl(var(--c),25%)  var(--g))  calc( 1 * var(--d)/2)  calc(-1 * var(--d)/2),
    linear-gradient(-45deg, hsl(var(--c),27%)  var(--g)),
    linear-gradient(-45deg, hsl(var(--c),32%)  var(--g))  calc(-1 * var(--d)/2)  calc(-1 * var(--d)/2),
    linear-gradient(-225deg,hsl(var(--c),30%)  var(--g)),
    linear-gradient(-225deg,hsl(var(--c),22%)  var(--g))  calc( 1 * var(--d)/2)  calc( 1 * var(--d)/2),
    linear-gradient(225deg, hsl(var(--c),40%)  var(--g)),
    linear-gradient(225deg ,hsl(var(--c),42%)  var(--g))  calc(-1 * var(--d)/2)  calc( 1 * var(--d)/2);
    
  background-size:var(--d) var(--d);
  
  margin:0;
  height:100vh;
}

---

Теперь вы можете легко иметь любой фон:

.box {
  --d:100px; /* Dimension */
   --c:256, 64%; /* Base color */
   
   
  --g:calc(0.7072 * var(--d)/2),transparent 0; /* 0.7072 = cosinus(45deg)*/
  background:
    linear-gradient( 45deg, hsl(var(--c),20%)  var(--g)),
    linear-gradient( 45deg, hsl(var(--c),25%)  var(--g))  calc( 1 * var(--d)/2)  calc(-1 * var(--d)/2),
    linear-gradient(-45deg, hsl(var(--c),27%)  var(--g)),
    linear-gradient(-45deg, hsl(var(--c),32%)  var(--g))  calc(-1 * var(--d)/2)  calc(-1 * var(--d)/2),
    linear-gradient(-225deg,hsl(var(--c),30%)  var(--g)),
    linear-gradient(-225deg,hsl(var(--c),22%)  var(--g))  calc( 1 * var(--d)/2)  calc( 1 * var(--d)/2),
    linear-gradient(225deg, hsl(var(--c),40%)  var(--g)),
    linear-gradient(225deg ,hsl(var(--c),42%)  var(--g))  calc(-1 * var(--d)/2)  calc( 1 * var(--d)/2);
    
  background-size:var(--d) var(--d);
  
  width:200px;
  height:200px;
  display:inline-block;
}

<div class="box" style="--d:50px;--c:120,20%"></div>
<div class="box" style="--d:70px;--c:20,80%"></div>
<div class="box" style="--d:20px;--c:10,20%"></div>
<div class="box" style="--d:30px;--c:220,20%"></div>

---

В ближайшем будущем вы можете сделать то же самое с меньшим количеством кода, используя conic-gradient.

^{Приведенный ниже код работает только на Chrome}

.box {
  --d:100px; /* Dimension */
   --c:256, 64%; /* Base color */
   
  background:
    conic-gradient(hsl(var(--c),20%) 0.125turn,
                   hsl(var(--c),32%) 0.125turn 0.25turn,
                   hsl(var(--c),27%) 0.25turn  0.375turn,
                   hsl(var(--c),42%) 0.375turn 0.5turn ,
                   hsl(var(--c),30%) 0.5turn   0.625turn,
                   hsl(var(--c),22%) 0.625turn 0.75turn ,
                   hsl(var(--c),40%) 0.75turn  0.875turn,
                   hsl(var(--c),25%) 0.875turn 1turn);
  background-size:var(--d) var(--d);
  
  width:200px;
  height:200px;
  display:inline-block;
}

<div class="box" style="--d:50px;--c:120,20%"></div>
<div class="box" style="--d:70px;--c:20,80%"></div>
<div class="box" style="--d:20px;--c:10,20%"></div>
<div class="box" style="--d:30px;--c:220,20%"></div>