使用背景颜色的多色圆形 div？

Posted 2023-02-21

技术标签:

【中文标题】使用背景颜色的多色圆形 div？【英文标题】：Multi-coloured circular div using background colours? 【发布时间】：2018-05-27 02:57:18 【问题描述】：

我正在尝试在 CSS 中创建一个多色圆圈来模拟命运之轮，我尝试使用线性渐变，但它只是应用垂直穿过圆形 div 的颜色条，而不是像彩色区域一样如果有道理，你是在切披萨吗？

这是我尝试过的代码：

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

这会导致：

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

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

【问题讨论】：

这是可能的，但它会是相当长的 html/CSS。您必须创建许多对象，然后使用 ::before 和 ::after 语句将它们剪切。仅使用背景图像，并有 2 或 3 个 media 查询以针对不同的屏幕尺寸使用不同的背景不是更容易吗？使用 html 画布制作一个饼图，它与我猜想的目标非常接近。 ..或者更简单地使用 SVG。 ***.com/questions/27943053/… 请检查我的回答。它更适合您的问题，我给出了两个版本。 @EM-Creations 【参考方案1】：

一种解决方案是考虑旋转线性梯度使用多个背景层。我们也可以依赖伪元素和一些透明的颜色。

然后简单的调整度数、颜色、颜色的不透明度和伪元素的位置，就可以得到你想要的任何图表：

.circle 
  margin: 20px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: 
    linear-gradient(to right, rgba(255,0,0,0.5) 50%, yellow 0%), 
    linear-gradient(-110deg, black 50%, pink 0%);
  position: relative;
  overflow: hidden;


.circle:after,
.circle:before
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

.circle:after 
  background: linear-gradient(-45deg, rgba(255, 180, 180, 0.5) 50%, transparent 0%);
    bottom: 50%;
    left: 50%;


.circle:before 
  background: 
    linear-gradient(0deg, rgba(128, 169, 170, 0.5) 50%, transparent 0%), 
    linear-gradient(50deg, rgba(0, 169, 170, 1) 50%, transparent 0%);

&lt;div class="circle"&gt;&lt;/div&gt;

这里是考虑不同配置的更多示例

一个

多个

.circle 
  margin: 20px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(0deg, rgba(0, 255, 217, 0.4) 50%, transparent 0%), 
              linear-gradient(45deg, rgba(0, 128, 0, 0.4) 50%, transparent 0%), 
              linear-gradient(90deg, rgba(11, 255, 0, 0.4) 50%, transparent 0%), 
              linear-gradient(135deg, pink 50%, transparent 0%), 
              linear-gradient(180deg, brown 50%, transparent 0%),
              linear-gradient(225deg, yellow 50%, transparent 0%),
              linear-gradient(270deg, red 50%, transparent 0%);
  position: relative;
  overflow: hidden;

&lt;div class="circle"&gt;&lt;/div&gt;

多个

一个

.circle 
  margin: 20px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(to right, red 50%, yellow 0%);
  position: relative;
  overflow: hidden;


.circle:after 
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(45deg, rgba(255, 180, 180, 0.5) 50%, transparent 0%);


.circle:before 
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(125deg, rgba(128, 169, 170, 0.5) 50%, transparent 0%);


.circle-alt 
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(0, 250, 0, 0.5) 50%, rgba(0, 250, 255, 0.5) 0%);
  position: absolute;
  overflow: hidden;

<div class="circle">
  <div class="circle-alt"></div>
</div>

Multiple

multiple

solid

background-position

.circle 
  margin: 20px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(to right, red 50%, transparent 0%), 
              linear-gradient(225deg, transparent 50%, blue 0%),
              linear-gradient(0deg, green 50%, transparent 0%),
              linear-gradient(-45deg, black 50%, transparent 0%),
              linear-gradient(-90deg, yellow 50%, transparent 0%);
  position: relative;
  overflow: hidden;


.circle:before 
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 50%;
  right: 50%;
  background:linear-gradient(45deg,lightblue 50%, transparent 0%)

.circle:after 
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  bottom: 0;
  right: 50%;
  background:linear-gradient(135deg, brown 50%, pink 0%);

&lt;div class="circle"&gt;&lt;/div&gt;

命运之轮

.circle 
  margin: 20px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(to right, #06b51d 50%, transparent 0%), 
              linear-gradient(60deg, #7e00ff 50%, transparent 0%), 
              linear-gradient(30deg, #ff00bd 50%, transparent 0%), 
              linear-gradient(0deg, #ff0000 50%, transparent 0%), 
              linear-gradient(-30deg, #ff4700 50%, transparent 0%), 
              linear-gradient(-60deg, #ffa500 50%, transparent 0%), 
              linear-gradient(-90deg, #ffff00 50%, transparent 0%);
  position: relative;
  overflow: hidden;
  animation: rotate 6s linear infinite;

.circle:before 
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 50%;
  right: 50%;
  background: linear-gradient(210deg, transparent 64%, #09ffa5 0%),
              linear-gradient(240deg, transparent 37%, #34ff00 0%);


.circle:after 
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  bottom: 0;
  right: 50%;
  background:linear-gradient(150deg, #00acff 37%, transparent 0%),
             linear-gradient(120deg, #0075ff 63%, #1200ff 0%);

@keyframes rotate 
  from 
    transform: rotate(0deg);
  
  to 
    transform: rotate(360deg);

&lt;div class="circle"&gt;&lt;/div&gt;

以不同方式实现相同结果的相关问题：Sass/CSS color wheel

【讨论】：

你是如何制作这个色轮的？是你自己还是某个发电机？ @NevinMadhukarK 是我自己我需要做这样的事情 - imgur.com/a/MODPouI 关于您的哪些示例可能对此有所帮助的任何建议？ @NevinMadhukarK 你可以检查这个问题：***.com/a/60442793/8620333我写了一个SASS代码来轻松控制它。我设法得到了答案。尽管我在考虑更多的线性渐变答案。如果我是正确的，那就使用 span。【参考方案2】：

您可以使用边框来做到这一点：

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

&lt;div class="pizza"&gt;&lt;/div&gt;

【讨论】：

我想我会选择你的更新版本，因为它似乎是最简洁且易于修改的，与我已有的元素完美搭配，谢谢！小伙子，让我们不要争论，每个人都给出了一个我很感激的有效答案，我赞成所有有效的答案（我测试了所有答案）但这个似乎最容易修改并且是简单的复制和粘贴，无需对我的代码进行其他更改；这就是为什么我选择它作为接受的答案。【参考方案3】：

可以使用称为圆锥渐变的方法来完成。不幸的是，目前许多浏览器都不支持它们。 Lea Verou 创建了一个轻量级 JS 插件，尽管它可以启用它们的使用：

https://leaverou.github.io/conic-gradient/

这可以用来创建：

.elem 
width: 200px;
height: 200px;
background: conic-gradient(yellow 8.3%, greenyellow 0 16.6%, green 0 24.9%, darkgreen 0 33.2%, blue 0 41.5%, violet 0 49.8%, purple 0 58.1%, pink 0 66.4%, red 0 74.7%, orangered 0 83%, orange 0 91.3%, gold 0 100%);
border-radius: 50%

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="//cdn.rawgit.com/LeaVerou/conic-gradient/gh-pages/conic-gradient.js"></script>

<div class="elem"></div>

【讨论】：

它可以工作（Chrome、FF 和 Safari），只是没有内置的“运行代码 sn-p”功能（可能是因为它包含外部脚本？）。抱歉，我已经更新了 sn-p，它应该可以在所有浏览器中使用。在 Chrome 中它应该可以工作，但它对我来说是最新版本。对于某些浏览器，它需要先免费加载前缀。【参考方案4】：

扩展@Temani Afif 的答案，但更类似于您的要求：

.test 
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-image: linear-gradient(150deg, transparent 63%, tomato 63%),  
    linear-gradient(120deg, transparent 36.5%, red 36.5%),
    linear-gradient(fuchsia, fuchsia),
    linear-gradient(240deg, transparent 63%, green 63%),  
    linear-gradient(210deg, transparent 36.5%, lime 36.5%),
    linear-gradient(lightgreen, lightgreen),
    linear-gradient(330deg, transparent 63%, blue 63%),  
    linear-gradient(300deg, transparent 36.5%, lightblue 36.5%),
    linear-gradient(cyan, cyan),
    linear-gradient(60deg, transparent 63%, papayawhip 63%),  
    linear-gradient(30deg, transparent 36.5%, yellow 36.5%),
    linear-gradient(gold, gold);
  background-position: right top, right top, right top, 
        right bottom, right bottom, right bottom,
        left bottom, left bottom, left bottom,
        left top, left top, left top;

&lt;div class="test"&gt;&lt;/div&gt;

【讨论】：

【参考方案5】：

您可以使用 css 实现此目的，但由于您想要 12 个切片，您将不得不使用更复杂的标记。如果您只想使用 4 或 8，则可以使用更简单的多背景解决方案。

使用边界半径结合倾斜技巧来绘制任意角度的切片使用多个包装切片，每个切片都旋转

我更喜欢的另一个想法：使用 svg 图形。

.container 
  position: absolute;
  left: 300px;
  top: 0;


.wrap 
  position: absolute;
  transform: rotate(30deg);
  transform-origin: 0% 100%;


.slice 
  height: 100px;
  width: 100px;
  overflow: hidden;
  transform-origin: 0% 100%;
  transform: skew(-60deg);
  position: relative;


.slice::before 
  height: inherit;
  width: inherit;
  position: absolute;
  content: "";
  border-radius: 0 100% 0 0;
  transform-origin: 0% 100%;
  transform: skew(60deg);


.wrap-0 
  transform: rotate(0deg);


.wrap-0 .slice::before 
  background: hsl(0, 100%, 50%);


.wrap-1 
  transform: rotate(30deg);


.wrap-1 .slice::before 
  background: hsl(30, 100%, 50%);


.wrap-2 
  transform: rotate(60deg);


.wrap-2 .slice::before 
  background: hsl(60, 100%, 50%);


.wrap-3 
  transform: rotate(90deg);


.wrap-3 .slice::before 
  background: hsl(90, 100%, 50%);


.wrap-4 
  transform: rotate(120deg);


.wrap-4 .slice::before 
  background: hsl(120, 100%, 50%);


.wrap-5 
  transform: rotate(150deg);


.wrap-5 .slice::before 
  background: hsl(150, 100%, 50%);


.wrap-6 
  transform: rotate(180deg);


.wrap-6 .slice::before 
  background: hsl(180, 100%, 50%);


.wrap-7 
  transform: rotate(210deg);


.wrap-7 .slice::before 
  background: hsl(210, 100%, 50%);


.wrap-8 
  transform: rotate(240deg);


.wrap-8 .slice::before 
  background: hsl(240, 100%, 50%);


.wrap-9 
  transform: rotate(270deg);


.wrap-9 .slice::before 
  background: hsl(270, 100%, 50%);


.wrap-10 
  transform: rotate(300deg);


.wrap-10 .slice::before 
  background: hsl(300, 100%, 50%);


.wrap-11 
  transform: rotate(330deg);


.wrap-11 .slice::before 
  background: hsl(330, 100%, 50%);

<div class="container">
  <div class="wrap wrap-0">
    <div class="slice"></div>
  </div>
  <div class="wrap wrap-1">
    <div class="slice"></div>
  </div>
  <div class="wrap wrap-2">
    <div class="slice"></div>
  </div>
  <div class="wrap wrap-3">
    <div class="slice"></div>
  </div>
  <div class="wrap wrap-4">
    <div class="slice"></div>
  </div>
  <div class="wrap wrap-5">
    <div class="slice"></div>
  </div>
  <div class="wrap wrap-6">
    <div class="slice"></div>
  </div>
  <div class="wrap wrap-7">
    <div class="slice"></div>
  </div>
  <div class="wrap wrap-8">
    <div class="slice"></div>
  </div>
  <div class="wrap wrap-9">
    <div class="slice"></div>
  </div>
  <div class="wrap wrap-10">
    <div class="slice"></div>
  </div>
  <div class="wrap wrap-11">
    <div class="slice"></div>
  </div>
</div>

【讨论】：

【参考方案6】：

CSS Tricks 有一个post about conic gradients，将“彩色伞”描述为中间步骤，看起来非常适合您使用。为方便起见，我将其放在了Code Pen 中。

HTML：

<div class="wheel">
  <ul class="umbrella">
    <li class="color"></li>
    <li class="color"></li>
    <li class="color"></li>
    <li class="color"></li>
    <li class="color"></li>
    <li class="color"></li>
    <li class="color"></li>
    <li class="color"></li>
    <li class="color"></li>
    <li class="color"></li>
    <li class="color"></li>
    <li class="color"></li>
  </ul>
</div>

SCSS：

@mixin circle($size) 
  content: "";
  position: absolute;
  border-radius: 50%;
  width: $size;
  height: $size;
  left: calc(50% - #$size/2);
  top: calc(50% - #$size/2);


$wheel: 15em;
.color 
  @include circle($wheel);
  clip: rect(0, $wheel, $wheel, #$wheel/2);
  &:after 
    @include circle($wheel);
    background: blue;
    clip: rect(0, #$wheel/2, $wheel, 0);
    transform: rotate(45deg);
  


.color, .color:nth-child(n+7):after 
  clip: rect(0, $wheel, $wheel, #$wheel/2);

.color:after, .color:nth-child(n+7) 
  @include circle($wheel);
  clip: rect(0, #$wheel/2, $wheel, 0);


$colors: (#9ED110, #50B517, #179067, #476EAF, #9f49ac, #CC42A2, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604);
@for $i from 0 to length($colors) 
  .color:nth-child(#1+$i):after 
    background-color: nth($colors, $i+1);
    @if $i < 6 
      transform: rotate(#30*(1+$i)deg);
      z-index: #length($colors)-$i;
     @else 
      transform: rotate(#-30+(30*(1+$i))deg);

附带说明，如果背景图像的唯一问题是缩放问题，请记住 SVG 图像可以平滑缩放，因为它们基本上是矢量图形。（您必须手动绘制，但图像会缩放。）

【讨论】：

我喜欢圆锥渐变的想法，但我不认为使用<li> 标签来表示***上的颜色在语义上是正确的。我也远离 SVG 以保持简单，因为我将绑定 javascript 事件并从 JavaScript 操作***。如果语义困扰您，<ul> 和 <li> 标签可以很容易地成为 <div> 或 <span> 标签（或其他）。（还有一个论点是，色轮准确地是一个颜色列表，但我觉得没有必要在这一点上巩固自己。）需要从 JS 操作颜色是您可能想在您的问题中添加一个考虑因素。是的，我知道它可以换成更多语义标签，但它不像其他选择那样简洁，这就是为什么我不接受它作为“接受的答案”。我仍然赞成它，因为它是一个有效的解决方案，谢谢！【参考方案7】：

<div class="circle">
    <div class="table italy">
        <div class="table-cell green"></div>
        <div class="table-cell white"></div>
        <div class="table-cell red"></div>
    </div>
</div>
<div class="circle">
    <div class="table france">
        <div class="table-cell blue"></div>
        <div class="table-cell white"></div>
        <div class="table-cell red"></div>
    </div>
</div>
<div class="circle">
    <div class="table windows">
        <div class="table-cell red"></div>
        <div class="table-cell green"></div>
        <div class="table-cell yellow"></div>
        <div class="table-cell blue"></div>
    </div>
</div>
<div class="circle">
    <div class="table rainbow">
        <div class="table-cell red"></div>
        <div class="table-cell orange"></div>
        <div class="table-cell yellow"></div>
        <div class="table-cell green"></div>
        <div class="table-cell blue"></div>
        <div class="table-cell indigo"></div>
        <div class="table-cell violet"></div>
    </div>
</div>

你有它：创建多色圆圈的可靠方法。这种方法的好处在于，无论你有多少颜色，它都可以在 IE 中使用。

【讨论】：

只是一个问题：这个 HTML 怎么能在没有任何 CSS 的情况下工作？

以上是关于使用背景颜色的多色圆形 div？的主要内容，如果未能解决你的问题，请参考以下文章

javascript 更改div的样式以删除阴影文本并显示带有圆形边框的新背景颜色。

如何使用背景颜色设置圆形按钮并在按下时更改颜色

具有多种颜色背景的 QPalette

更改圆形按钮android的背景颜色

Java JButton 设置文本背景颜色

iOS中的多色多边形