css3如何实现这样的渐变背景?

Question

如图所示，渐变背景倾斜平铺

Answer 1

你这个倾斜角度，单纯用CSS渐变背景不太好做，用伪类会比较好实现。但是我觉得没有太多必要，直接用图片背景cover的形式会方便很多。

<div class="test">
  <p>TEST TEXT</p>
</div>

<style>
.test {
     width: 100vw;
     height: 200px;
     position: relative;
     overflow: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .test p {
     font-size: 45px;
     color: #d4090b;
     font-family: sans-serif;
}
 .test:before {
     content: '';
     width: 120%;
     height: 300%;
     background: linear-gradient(to bottom, #fcd8d6 0, rgba(252,216,214,0) 100%) center/contain, 
                 linear-gradient(to right, #fec0c5 55%, #fcd8d6 0) center/100px 100%;
     display: block;
     position: absolute;
     left: 50%;
     top: 50%;
     z-index: -1;
     transform: translate(-50%, -50%) rotate(10deg);
     transform-origin: center;
}
</style>

Answer 2

Codepen

Answer 3

在CSS3中，要创建一个倾斜平铺的渐变背景，你可以使用linear-gradient()函数结合background-size和background-repeat属性。但是，linear-gradient本身不支持直接设置倾斜平铺的效果，因为它通常用于定义单个渐变。不过，你可以通过调整渐变的方向和大小，并使用background-repeat来实现一种模拟的倾斜平铺效果。

以下是一个简单的例子，展示如何创建一个类似于你提供的图片中的倾斜渐变效果：

.gradient-background {
  /* 定义一个线性渐变，角度决定了倾斜的方向 */
  background-image: linear-gradient(60deg, red, yellow);
  
  /* 设置背景大小，这里假设我们想要让渐变在水平和垂直方向上重复 */
  /* 但因为我们要模拟倾斜平铺，所以我们需要将背景大小设置为非默认的 */
  /* 假设你的容器宽度是300px，高度是200px，你可能需要调整这些值 */
  background-size: 100px 50px; /* 根据需要调整 */
  
  /* 使背景重复 */
  background-repeat: repeat;
  
  /* 确保背景不会根据内容大小裁剪 */
  background-attachment: fixed;
  
  /* 根据需要设置其他样式 */
  width: 300px; /* 容器宽度 */
  height: 200px; /* 容器高度 */
}

请注意，background-size的值需要根据你的具体需求进行调整。在这个例子中，我使用了100px 50px作为示例值，但这可能并不完全适合你的设计。你可能需要根据你的容器大小以及你想要的渐变图案的密度来调整这些值。

此外，由于background-size和linear-gradient的角度是分开设置的，你可能需要通过实验来找到最佳的组合，以便渐变看起来是“倾斜平铺”的。

如果你想要更复杂的倾斜平铺效果（比如每个渐变块之间有明显的界限或者不同的颜色变化），你可能需要使用多个背景图层或者SVG/Canvas来实现。然而，对于简单的倾斜渐变，上述方法应该足够了。