如何使用CSS制作X线性渐变效果？

Question

我正在尝试使用 CSS linear-gradient 制作类似（下图）的内容（实际上它是一个背景全角横幅），但我似乎无法弄清楚这个问题。有人可以帮忙吗？

CSS & HTML

#back {
  padding: 200px 0;
  color: black;
  background: 
  linear-gradient(120deg, red 25%, transparent 30%), 
  linear-gradient(60deg, yellow 25%, transparent 30%), 
  linear-gradient(-60deg, blue 10%, transparent 30%), 
  linear-gradient(240deg, green 25%, transparent 0%);
}

<section id="back">
  <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dictum velit. Sed nec enim leo. Quisque nec urna ex. Vestibulum ut aliquet ante, non consectetur nunc. Nunc ac consequat nisl. Etiam vitae scelerisque nisi. Vivamus ipsum ipsum, tincidunt
    at augue dapibus, tincidunt aliquet ligula. Curabitur id neque porttitor, sodales velit eget, cursus mi.</h3>
</section>

非常感谢您的任何回复。

Answer 1

您可以使用 linear-gradient 和 background-size。

你需要拼凑碎片。一种颜色可以是单一的background-color:

你终于需要画一个任意大小的正方形了

  #back,
.back {
  display: inline-block;
  margin: 1em;
  vertical-align: middle;
  padding: 100px;
  border: solid;
  height: 0;
  width: 0;
  color: black;
  background:
  /* red */
  linear-gradient(45deg, red 50%, transparent 50.1%) 0 0 no-repeat, 
  linear-gradient(135deg, red 50%, transparent 51%) 0 100% no-repeat, 
  /*yellow */
  linear-gradient(135deg, yellow 50%, transparent 50.1%) 100% 0% no-repeat, 
  linear-gradient(225deg, yellow 50%, transparent 51%) 0 0 no-repeat, 
  /* blue */
  linear-gradient(225deg, blue 50%, transparent 50.1%) 100% 100% no-repeat, 
  linear-gradient(-45deg, blue 50%, transparent 50.1%) 100% 0% no-repeat 
  /* green */
  green;
  background-size: 50% 50%
}

.back {
  padding: 0;
  height: 50px;
  width: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

<div id="back"></div>
<div class="back">test</div>

根据您在下面的评论，方向比度数更好。

#back {
  padding: 200px 0;
  color: black;
  color: black;
  background: 
  /* red */
  linear-gradient(to top right, red 50%, transparent 50.1%) 0 0 no-repeat, 
  linear-gradient(to bottom right, red 50%, transparent 51%) 0 100% no-repeat, 
  /*yellow */
  linear-gradient(to bottom right, yellow 50%, transparent 50.1%) 100% 0% no-repeat, 
  linear-gradient(to bottom left, yellow 50%, transparent 51%) 0 0 no-repeat, 
  /* blue */
  linear-gradient(to bottom left, blue 50%, transparent 50.1%) 100% 100% no-repeat, 
  linear-gradient(to top left, blue 50%, transparent 50.1%) 100% 0% no-repeat 
  /* green */
  green;
  background-size: 50% 50%;
  text-align: center;
}

<div id="back">  <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dictum velit. Sed nec enim leo. Quisque nec urna ex. Vestibulum ut aliquet ante, non consectetur nunc. Nunc ac consequat nisl. Etiam vitae scelerisque nisi. Vivamus ipsum ipsum, tincidunt
    at augue dapibus, tincidunt aliquet ligula. Curabitur id neque porttitor, sodales velit eget, cursus mi.</h3>
</div>

如何使用CSS制作X线性渐变效果？

How to make X linear-gradient effect using CSS?

html

css

linear-gradients