如何用公共部分制作2个重叠圆圈？

Question

我想用 css 制作这张图片 ( [1]: https://i.stack.imgur.com/avuBI.png) 但我的问题是中间部分帮助我完成那个部分

这是我的代码：

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>

我现在的情况是这样的：https://i.stack.imgur.com/uXo1j.png

感谢您的帮助

Answer 1

你在中间画了两个元素，比如两个切开的圆圈放在一起。一个元素不可能，但也许

mix-blend-mode

对你有帮助吗？

 <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>

Answer 2

您可以添加 middle div 和 right-circle 并为其设置适当的 css，如下例：

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>

Answer 3

对于这个挑战，您可以在中间部分插入一个单独的椭圆。

<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>

你可以为中间做一个单独的椭圆

如何用公共部分制作2个重叠圆圈？

How to make 2 overlap circles with commen part?

html

javascript

css

design-patterns

shapes