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

Question

我试图使用CSS linear-gradient(实际上它是一个背景全宽横幅)制作类似(下图)的东西,但我似乎无法想象deg.有人可以帮忙吗？

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>

从下面的评论中,当方向是比degres更好的方法.

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