使用背景颜色的多彩色圆形div？ [英] Multi-coloured circular div using background colours?

问题描述

我试图在CSS中创建一个多彩色的圆来模拟一个幸运轮，我尝试过使用线性渐变，但它只是应用了垂直穿过圆形div的颜色条，而不是被着色区域，如果如果有意义的话，你是在切比萨饼吗？

这是我试过的代码：

  background：-moz-linear-gradient（left，red，red 20％，blue 20％，blue）; 
  

结果如下：

但我希望它看起来更像这样吗？：

这是可能的CSS或我会有使用背景图片（我宁愿避免这一点，因为它不像页面大小调整那样容易缩放等）。

div>

您可以使用边框进行设置：

.chart {position：绝对;宽度：0;身高：0; border-radius：60px; -moz-border-radius：60px; -webkit-border-radius：60px;}＃chart1 {border-right：60px solid red;边框顶部：60px实心透明; border-left：60px solid transparent; border-bottom：60px solid transparent;}＃chart2 {border-right：60px solid transparent; border-top：60px纯绿色; border-left：60px solid transparent; border-bottom：60px solid transparent;}＃chart3 {border-right：60px solid transparent;边框顶部：60px实心透明;左边：60px纯蓝色; border-bottom：60px solid transparent;}＃chart4 {border-right：60px solid transparent;边框顶部：60px实心透明; border-left：60px solid transparent; border-bottom：60px solid yellow;}

< div id =chart1class =chart>< / div>< div id =chart2class =chart>< / div>< div id =chart3class =chart >< / div>< div id =chart4class =chart>< / div>

更新1
$ b

  .pizza {width：300px; height：300px; border-radius：100％; background：linear-gradient（45deg，lightblue 50％，blue 0％），linear-线性梯度（45度，西红柿50％，红0％）;线性梯度（-45度，＃E5E500 50％，黄色0％）;线性梯度（-45度，绿色50％，深绿色0％ 50％50％;背景位置：0％0％，100％0％，0 100％，100％100％;背景重复：无重复;}  

 < div class =pizza>< / div>  

I'm trying to create a multi-coloured circle in CSS to simulate a wheel of fortune, I've tried using linear gradients but it just applies strips of colour running vertically through the circular div rather than being coloured areas as if you were cutting up a pizza if that makes sense?

This is the code I've tried:

background: -moz-linear-gradient(left, red, red 20%, blue 20%, blue);

Which results in:

But I want it to look more like this?:

Is this possible in CSS or am I going to have to use a background image (I'd rather avoid this because it isn't as easy to scale as the page resizes etc..)?

解决方案

You can make this with using borders:

.chart {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 60px;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
}

#chart1 {
  border-right: 60px solid red;
  border-top: 60px solid transparent;
  border-left: 60px solid transparent;
  border-bottom: 60px solid transparent;
}

#chart2 {
  border-right: 60px solid transparent;
  border-top: 60px solid green;
  border-left: 60px solid transparent;
  border-bottom: 60px solid transparent;
}

#chart3 {
  border-right: 60px solid transparent;
  border-top: 60px solid transparent;
  border-left: 60px solid blue;
  border-bottom: 60px solid transparent;
}

#chart4 {
  border-right: 60px solid transparent;
  border-top: 60px solid transparent;
  border-left: 60px solid transparent;
  border-bottom: 60px solid yellow;
}

<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>
<div id="chart3" class="chart"></div>
<div id="chart4" class="chart"></div>

UPDATE 1

.pizza {
width: 300px;
height: 300px;
border-radius: 100%;
background: linear-gradient(45deg, lightblue 50%, blue 0%), linear-gradient(-45deg, green 50%, darkgreen 0%), linear-gradient(-45deg, #E5E500 50%, yellow 0%), linear-gradient(45deg, tomato 50%, red 0%);
background-size: 50% 50%;
background-position: 0% 0%, 100% 0%, 0 100%, 100% 100%;
background-repeat: no-repeat;
}

<div class="pizza"></div>

这篇关于使用背景颜色的多彩色圆形div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！