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

Question

我试图使用CSS linear-gradient制作类似（下图）（实际上它是背景全宽横幅），但我似乎无法计算出deg。有人可以帮忙吗？

CSS＆amp; 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：

你最终需要绘制任意大小的正方形

＆＃13;

＆＃13;

  #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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

从下面的评论中，当方向是比degres更好的方法时。

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;