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

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

Answer 3

或者像这样的事情。在这里，您可以添加任意数量的切片。但它比其他解决方案稍微长一些。如果您想了解更多有关此here的信息，请访问它。

＆＃13;

.pie {
          position: absolute;
          width: 100px;
          height: 100px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          -o-border-radius: 50px;
          border-radius: 50px;
          clip: rect(0px, 50px, 100px, 0px);
     }
     .hold {
          position: absolute;
          width: 100px;
          height: 100px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          -o-border-radius: 50px;
          border-radius: 50px;
          clip: rect(0px, 100px, 100px, 50px);
     }
     #pieSlice1 .pie {
       z-index:8;
          background-color: #1b458b;
          -webkit-transform:rotate(50deg);
          -moz-transform:rotate(50deg);
          -o-transform:rotate(50deg);
          transform:rotate(50deg);
     }
      #pieSlice2 .pie {
          z-index:7;
          background-color: red;
          -webkit-transform:rotate(100deg);
          -moz-transform:rotate(100deg);
          -o-transform:rotate(100deg);
          transform:rotate(100deg);
       }

＆＃13;

     <div id="pieSlice1" class="hold"><div class="pie"></div></div>
     <div id="pieSlice2" class="hold"><div class="pie"></div></div>

＆＃13;

CSS：圆圈有八种颜色，只有一个div

3 个答案: