How can I fixed this?

HTML-CSS
1

I am trying to make like this figure.

b

But I don’t understand how to overlay these figures in upward direction. Here’s the figure that I had done in this to make it.

Annotation 2021-02-11 130414

And here’s my code:

<div class="cir a"></div>
<div class="cir b"></div>
<div class="cir c"></div>

<style>
  body{
    background:#0B2429;
  }
  .cir{
    width:119px;
    height:120px;
    background:#F7EC7D;    
  }
  .a{
    position:relative;
    margin-top:9.35rem;
    margin-left:4.5rem;
    background:#F3AC3C;
    border-top-left-radius:50%;
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
  }
  .b{
    position:relative;
    margin-left:auto;
    margin-right:auto;
    margin-top:-11.3rem;
    background:#998235;
    border-top-left-radius:50%;
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
  }
  .c{
    margin-top:-11.2rem;
    margin-left:12.1rem;
    background:#F3AC3C;
    border-radius:50%;
  }
</style>

How to solve this ?

2

when you put the elements on the page, the last one is the one that will appear above the others, the first one below the others, you could change the order there

alternatively there is this:

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.