CSS:圆圈有八种颜色,只有一个div

Question

div {
    width: 200px;
    height: 200px;
    border-radius:100%;
    background: linear-gradient(45deg, blue, blue 100%), linear-gradient(135deg, green, green), linear-gradient(225deg, yellow, yellow) , linear-gradient(225deg, red, red);
    background-size: 50% 50%;
    background-position: 0% 0%, 0% 100%, 100% 0%, 100% 100%;
    background-repeat: no-repeat;
}

<div></div>

我正在尝试用8种颜色构建一个圆圈,你能不能帮我调整上面的代码？

Answer 1

使用以下CSS：

div {
  background: linear-gradient(45deg, lightgreen 50%, blue 50%),
              linear-gradient(-45deg, green 50%, darkgreen 50%),
              linear-gradient(-45deg, #e5e500 50%, yellow 50%),
              linear-gradient(45deg, tomato 50%, red 50%);

  background-position: 0% 0%, 100% 0%, 0 100%, 100% 100%;
}

div {
  background: linear-gradient(45deg, lightgreen 50%, blue 50%),
              linear-gradient(-45deg, green 50%, darkgreen 50%),
              linear-gradient(-45deg, #e5e500 50%, yellow 50%),
              linear-gradient(45deg, tomato 50%, red 50%);

  background-position: 0% 0%, 100% 0%, 0 100%, 100% 100%;
}

div {
  width: 200px;
  height: 200px;
  border-radius:100%;
  background: linear-gradient(45deg, lightgreen 50%, blue 50%),
              linear-gradient(-45deg, green 50%, darkgreen 50%),
              linear-gradient(-45deg, #e5e500 50%, yellow 50%),
              linear-gradient(45deg, tomato 50%, red 50%);
  background-size: 50% 50%;
  background-position: 0% 0%, 100% 0%, 0 100%, 100% 100%;
  background-repeat: no-repeat;
}