CSSとは別の形にすることはできますか？

Question

この図形をCSSから作成できますか？

.shape { 
 
    margin: 40px; 
 
    height: 40px; 
 
    width: 100px; 
 
    border-radius: 50px; 
 
    background: #333; 
 
    position: relative; 
 
} 
 

 

 
.shape:before { 
 
    height: 80px; 
 
    width: 80px; 
 
    border-radius: 100%; 
 
    content: ''; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background: #333; 
 
}

<div class="shape"></div>

Answer 1

これは、あなたがそう

.shape { 
 
    margin: 40px; 
 
    height: 40px; 
 
    width: 110px; 
 
    border-radius: 50px; 
 
    background: #333; 
 
    position: relative; 
 
} 
 

 
.shape:before { 
 
    height: 80px; 
 
    width: 80px; 
 
    border-radius: 100%; 
 
    content: ''; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background: #333; 
 
} 
 

 
.shape:after { 
 
    height: 40px; 
 
    width: 121px; 
 
    border-radius: 90%; 
 
    content: ''; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background: #333; 
 
}

<div class="shape"></div>

Answer 2

探しているもので、次の3つのコンポーネントを持っている、あなたはすでに通常のCSSを使用したものを作ってきたし、その他（circle）beforeセレクタを使用しています。ここでafterセレクタを使用して3番目のコンポーネントを作成します。

.shape { 
 
    margin: 40px; 
 
    height: 40px; 
 
    width: 155px; 
 
    border-radius: 50px; 
 
    background: #333; 
 
    position: relative; 
 
} 
 
.shape:after { 
 
    height: 55px; 
 
    width: 135px; 
 
    border-radius: 20px; 
 
    content: ''; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background: #333; 
 
} 
 

 
.shape:before { 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 100%; 
 
    content: ''; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background: #333; 
 
}

<div class="shape"></div>

Answer 3

このコードはあなたを助けるかもしれません。

これはCSSです。

* 
{ 
    margin: 0px; 
    padding: 0px; 
} 
.circle 
{ 
    position: relative; 
    height: 300px; 
    background: #000; 
    border-radius: 50%; 
    border-color: #000; 
    position: absolute; 
    top: 50px; 
    left:100px; 
} 
.top 
{ 
    width: 358px; 
    height: 115px; 
    background: #000; 
    border-radius: 54px; 
    position: absolute; 
    top:86px; 
    left: -28px; 
} 
.hor 
{ 
    width: 400px; 
    height: 50px; 
    background: #000; 
    border-radius: 50px; 
    position: absolute; 
    top:117px; 
    left:-50px; 
} 

これは対応するHTMLです。

<div class="page"> 
<div class="circle"> 
    <div class="top"></div> 
    <div class="hor"></div> 
</div></div>