1

I wanna do a half (9 o'clock to 3 o'clock) circle. The color started from 9 to 3 o'clock and color of green slowly turn to red.

Is it this possible do it in css?

Below circle a bit off from what i want. The color fade in the start 9 and 3 o'clock and the green in the middle of the circle.

The green color should start from the 9 o'clock and slowly to red.

.rounded {
  width: 300px;
  height: 300px;
  border: 10px solid transparent;
  border-radius: 150px;
  background-image: linear-gradient(white, white), linear-gradient(.50turn, green, red, white 50%);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

#parent {
  display: flex;
  width: 100vw;
  justify-content:center;
}
<div id="parent">
  <div class="rounded"></div>
</div>
Wilker
  • 551
  • 2
  • 6
  • 21
  • A radial-gradient perhaps? – j08691 May 14 '21 at 15:58
  • @j08691 should not possible do it in radial-gradient. The inside circle should with white color. It exactly look like the example i show. But the started and ended site color fade. – Wilker May 14 '21 at 16:02
  • try top left and top right radius values https://www.w3schools.com/cssref/css3_pr_border-top-left-radius.asp – Loveen Dyall May 14 '21 at 16:27
  • @LoveenDyall This way is able to do gradient color in border? – Wilker May 14 '21 at 16:29
  • you can with background-clip i think there is some browser support for it. Or you could use `overflow:hidden` so the background stays within the border – Loveen Dyall May 14 '21 at 16:30
  • what you want is a conic gradient, check until the end of the duplicate, you find a similar example – Temani Afif May 14 '21 at 19:54

1 Answers1

-1

#cont {
  background: -webkit-linear-gradient(left top, crimson 0%, #f90 100%);
  width: 300px;
  height: 300px;
  border-radius: 1000px;
  padding: 10px;
}

#box {
  background: black;
  width: 300px;
  height: 300px;
  border-radius: 1000px;
}
<div id="cont">
  <div id="box"></div>
</div>
Sultan Singh Atwal
  • 810
  • 2
  • 8
  • 19
MOHAME DMALIH MERABET
  • 1