html - 如何创建三 Angular 形背景？

Question

如上图所示，背景中有颜色相似但深浅不一的三 Angular 形。

我设法得到了相同的颜色

#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)
    0 0/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>