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>

如何用三角形创建背景？

1 个答案: