inverting the css to divide it into wo parts

Question

i have a div as follows

div.button.fill {
  color: #FFFFFF;
  background-color: #ffcc00;
}

I'd like to color, not the whole, but only half the circle in a given color, and the other half in another color (maybe by using two classes called leftHalf and rightHalf).

the code i am trying is, if the leftside half is white, the inside image should be half blue so the user should know that they have completed half profile and when they are done with profile, it will display just like the above image

Try this background: linear-gradient(to left, #e6f0ff 50%, #ffe6e6 50%); — Gavishiddappa Gadagi, Dec 23 '20 at 07:29

Elias Mulderij · Answer 1 · 2020-12-23T03:06:18.727

0

You can do that by using background-image: linear-gradient(...) like this.

div {
  color: #FFFFFF;
  background-image: linear-gradient(90deg,red 50%,yellow 50%);
  height: 100px;
  width: 100px;
  border-radius: 50px;
}

<div></div>

Also if you don't set a presentage after each color they will have a smooth transition.

You can also add in as many colors as you want.

edited Dec 23 '20 at 03:06

answered Dec 23 '20 at 02:51

Elias Mulderij

29
1
1
6

the main point of the css left behind, i want the internal icon to have inverted colors if i use linear for this one, because i do not want to hide the icon in the circle to hide its right side with same color, it should be yellow & red combination if the circle is red & yellow combined – Jhing Dec 23 '20 at 12:16

inverting the css to divide it into wo parts

1 Answers1