在css中创建不同的Circle形状

Question

我想要这样的形状。

但我尝试过以下代码

.halfCircleRight{
   height: 70px;
   width: 40px;
   border-radius: 0 90px 90px 0;
   background: #000000;       
}

<div class="halfCircleRight"> 

但是我无法实现完整输出。我很难创建this shape。任何人都可以帮我创建这个形状

Answer 1

这可能对你有帮助..

＆＃13;

＆＃13;

body{margin:0 }

.halfCircle1{  
   height: 100px;
   width: 100px;
   border-radius: 90px 90px 90px 90px;
   background: white;   
}
.halfCircle3{ 
   position:absolute;
   z-index:-1;
   top:50px;
   left:50px;
   height: 100px;
   width: 100px;
   border-radius: 90px 90px 90px 90px;
   background: #000000;       
}

＆＃13;

<div class="halfCircle1"></div>
<div class="halfCircle1"></div>
<div class="halfCircle3"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个

.halfCircleRight{
   height: 70px;
   width: 70px;
   border-top-right-radius: 10em;
   border-bottom-right-radius: 10em;
   background: #000000;       
}

.halfCoverTop {
   height: 35px;
   width: 35px;
   border-bottom-right-radius: 10em;
   background: #ffffff;
}

.halfCoverBottom{
   height: 35px;
   width: 35px;
   border-top-right-radius: 10em;
   background: #ffffff;
}

<div class="halfCircleRight">
  <div class="halfCoverTop"></div>
  <div class="halfCoverBottom"></div>
</div>