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

问题描述

我正在尝试在 CSS 中创建一个多色圆圈来模拟命运之轮，我尝试使用线性渐变，但它只是应用垂直穿过圆形 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?

这是我尝试过的代码:

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

这会导致:

但我希望它看起来更像这样?:

这在 CSS 中是否可行，还是我必须使用背景图片(我宁愿避免这样做，因为它不像页面调整大小等那样容易缩放)?

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>

更新 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屋！