css Question posted in
Some basic documentation can be found here.

How to use css gradients to make half circles

I need to create a div element which its background is composed of two colors split with a half circle:

div element with two colors background separated by half circle

I want to use gradients because it will be more convenient for animation purposes. I don’t want to use pseudo-elements or border-radius and its declinations. Also, I’m limited with my HTML structure; my div element must contain only text, no tags.

I know that gradients is the key for lots of things like that but fail to create what I want.

If anyone can help me on that, I would be very happy. Thanks a lot and have a nice day.

Tags:

3

Answers


  1. 0

    You can do it like below:

    .box {
  --p:.5; /* progression (from 0 to 1) */

  line-height: 2em; /* control the height of the element */
  width: 200px;
  background:
    radial-gradient(100% 50% at left, pink 98%,#0000)
     calc(var(--p)*100% + var(--p)*.5lh) /.5lh,
    conic-gradient(lightblue 50%,pink 0) 
     calc((1 - var(--p))*100%)/200%;
  background-repeat: no-repeat;
  
  
  text-align: center;
  border: 1px solid #000;
  margin: 10px;
}
    <div class="box"> Some text </div>
<div class="box" style="--p:.2"> Some text </div>
<div class="box" style="--p:.6"> Some text </div>
<div class="box" style="--p:.8"> Some text </div>
    Login or Signup to reply.
  2. 0

    A combination of linear and radial gradients does nicely.

    .fancy {
  min-height: 5rem;
  margin: 2rem;
  background: radial-gradient(circle closest-side, #F08080 100%, transparent), 
              linear-gradient(to right, #F08080, #F08080 50%, #6495ED 50%);
}
    <div class="fancy"></div>
    Login or Signup to reply.
  3. 0

    You can also build it with basic CSS properties:

    <div style="border: 1px solid violet; background-color: yellow">
    <div style="position: absolute; width: 100%; text-align: center">
      Lorem ipsum
    </div>
    <div
      style="
        width: 50%;
        height: 20px;
        border-radius: 0 8px 8px 0;
        background-color: red;
      "
    ></div>
  </div>

    Result picture

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search