wake-up-neo.com

Mehrfarbige kreisförmige div mit Hintergrundfarben?

Ich versuche, in CSS einen mehrfarbigen Kreis zu erstellen, um ein Glücksrad zu simulieren. Ich habe versucht, lineare Verläufe zu verwenden, aber es werden nur Farbstreifen angewendet, die vertikal durch die kreisförmige Teilung verlaufen, anstatt farbige Bereiche zu sein, als würden Sie schneiden eine Pizza machen, wenn das Sinn macht?

Dies ist der Code, den ich ausprobiert habe:

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

Was ergibt:

Wheel-attempt

Aber ich möchte, dass es so aussieht?:

Coloured wheel

Ist dies in CSS möglich oder muss ich ein Hintergrundbild verwenden (ich möchte dies lieber vermeiden, da es nicht so einfach zu skalieren ist, wie die Größe der Seite usw.)?

34
EM-Creations

Sie können dies mit Hilfe von Rahmen machen:

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

PDATE 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>
19
Elvin Mammadov

Eine Lösung für etwas ist die Verwendung mehrerer Hintergrundebenen unter Berücksichtigung von gedrehter linearer Farbverlauf. Wir können uns auch auf Pseudoelemente und einige transparente Farben verlassen.

Passen Sie dann einfach Grad, Farben, Deckkraft und Position des Pseudoelements an, um ein beliebiges Diagramm zu erhalten:

.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%);
}
<div class="circle"></div>

Hier sehen Sie ein Beispiel für eine andere Konfiguration

  1. Verwenden Sie nur ein Element und mehrere Farbverlauf:
.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;
}
<div class="circle"></div>
  1. Verwenden Sie mehrere Elemente und ein Farbverlauf pro Element:
.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>
  1. Verwenden von mehrere Elementen und mehrere Verläufen pro Element und nur durchgehend Farbe (ohne Änderung von background-position wie die Antwort von @vals):
.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%);
}
<div class="circle"></div>
  1. Das Glücksrad (Mit Drehung!):
.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);
  }
}
<div class="circle"></div>
39
Temani Afif

Dies kann mit sogenannten konischen Verläufen geschehen. Leider werden sie derzeit von vielen Browsern nicht unterstützt. Lea Verou hat ein leichtes JS-Plugin erstellt, mit dem sie es verwenden können:

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

Dies könnte verwendet werden, um Folgendes zu erstellen:

.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>
16
SWC

Erweitere die Antwort von @Temani Afif, aber ähnlicher deiner Anfrage:

.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;
}
<div class="test"></div>
10
vals

Sie könnten dies mit CSS erreichen, aber da Sie 12 Slices benötigen, müssen Sie ein komplizierteres Markup verwenden. Wenn Sie nur 4 oder 8 verwenden möchten, ist eine viel einfachere Lösung mit mehreren Hintergründen möglich.

  • Verwenden Sie den Randradius in Kombination mit einem Schräglauf, um einen Bogenwinkel zu zeichnen
  • Verwenden Sie mehrere umwickelte Scheiben, jede gedreht

Eine andere Idee, die ich bevorzugen würde: Verwenden Sie eine SVG-Grafik dafür.

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

CSS Tricks hat einen Post über Kegelverläufe , der den "bunten Regenschirm" als Zwischenschritt beschreibt, der perfekt für Ihre Verwendung aussieht. Ich habe es der Einfachheit halber in einem Code Pen zusammengefasst.

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

Wenn das einzige Problem mit Hintergrundbildern die Skalierung ist, sollten Sie berücksichtigen, dass SVG-Bilder reibungslos skaliert werden, da es sich im Grunde um Vektorgrafiken handelt. (Sie müssten das manuell zeichnen, aber das Bild würde skaliert.)

5
joanwolk
<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>

Da haben Sie es: eine zuverlässige Möglichkeit, mehrfarbige Kreise zu erstellen. Das Tolle an diesem Ansatz ist, dass es nicht darauf ankommt, wie viele Farben Sie haben UND es funktioniert bis zum IE.

0
Learn Vern