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> 

I'm trying to build a circle with 8 colors, could you please help me to tweak the code above?

Answer 1

Use following 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 { 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; } 

 <div></div> 

Answer 2

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

 <div></div> 

Answer 3

Or with something like this. Here you can add as many slices you want. But its a little bit longer than the other solutions. If you want to read more about this here is the right place.

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

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