CODEWITHSUNDEEP
javascripthtmlcssdesign-patternsshapes
Mohammadamin Alizadeh
Mohammadamin Alizadeh

Reputation: 194

How to make 2 overlap circles with commen part?

I want to make this image( [1]: https://i.sstatic.net/avuBI.png) with css but my problem is middle part help me with that part

This is my code:

body{
  background:#09042A;
}
#left-circle,#middle,#right-circle{
  position:absolute;
}
#left-circle{
  top:75px;
  left:75px;
  height:150px;
  width:150px;
  border-radius:50%;
  background:#7B3F61;
  z-index:1;
}
#right-circle{
  top:75px;
  right:75px;
  height:150px;
  width:150px;
  border-radius:50%;
  background:#E78481;
  z-index:1;
}
#middle{
  top:95px;
  left:175px;
  height:110px;
  width:50px;
  border-radius:50%;
  background:#09042A;
  z-index:2;
}
<div id="left-circle"></div>
<div id="left-circle"></div>
<div id="middle"></div>
<div id="right-circle"></div>

My current situation is like this picture:https://i.sstatic.net/uXo1j.png

I appreciate your help

Upvotes: 0

Views: 157

Answers (3)

amir mohammad salimzadeh
amir mohammad salimzadeh

Reputation: 28

for this challenge, you can insert a separate oval for the middle part.

<html>
  <head>
    <style>
      body{
        background-color:#09042A;
        display:flex;
        justify-content:center;
        align-items:center;
      }
      .l-circle{
        width:150px;
        height:150px;
        background-color:#7B3F61;
        border-radius:100%;
        position:relative;
        left:25px;
      }
      .r-circle{
        width:150px;
        height:150px;
        background-color:#E78481;
        border-radius:100%;
        position:relative;
        right:25px;
      }
      .m-circle{
        width:85px;
        height:80px;
        background-color:#09042A;
        border-radius:0 100px 0 100px;
        position:absolute;
        transform:rotate(48deg);
        left:223px;
      }
    </style>
  </head>
  <body>
    <div class="l-circle">
         </div>
    <div class="r-circle">
    </div>
    <div class="m-circle">
    </div>
  </body>
</html>

you can make a separate oval for the middle

Upvotes: 0

Minal Chauhan
Minal Chauhan

Reputation: 6148

You can add middle div and right-circle and set proper css for it, like below example:

body{
  background:#09042A;
}
#left-circle,#middle,#right-circle{
  position:absolute;
}
#left-circle{
  top:75px;
  left:75px;
  height:150px;
  width:150px;
  border-radius:50%;
  background:#7B3F61;
  z-index:1;
}
#right-circle{
  top:75px;
  left:175px;
  height:150px;
  width:150px;
  border-radius:50%;
  background:#E78481;
  z-index:1;
  overflow: hidden;
}
#middle{
  top:0;
  left:-99px;
  height:150px;
  width:150px;
  border-radius:50%;
  background:#09042A;
  z-index:2;
}
<div id="left-circle"></div>
<div id="right-circle">
  <div id="middle"></div>
</div>

Upvotes: 1

Yalcin Kilic
Yalcin Kilic

Reputation: 800

You have draw that in the middle with two elements like two cutted circles wich are put together. Its not possible with one element but maybe

mix-blend-mode

will help you?

 <div id="left-circle"></div>
  <div id="left-circle"></div>
  <div id="middle"></div>
  <div id="right-circle"></div>
  <style>body{background:#09042A;}
  #left-circle,#middle,#right-circle{
  position:absolute;
  }
  #left-circle{
  top:75px;
  left:75px;
  height:150px;
  width:150px;
  border-radius:50%;
  background:#7B3F61;
  z-index:1;
  }
  #right-circle{
  top:75px;
  left: 150px;
  height:150px;
  width:150px;
  border-radius:50%;
  background:#E78481;
  z-index:1;
  mix-blend-mode: screen;
  }
  </style>

Upvotes: 0

Related Questions