直接上代码吧。
.smile{
width: 10px;
height: 10px;
border-radius: 50%;
background-color: black;
display: inline-block;
}
.eyes{
width: 5px;
height: 5px;
border-radius: 50%;
background-color: white;
margin-left: 4px;
/* display: inline-block; */
}
.circle{
width: 30px;
height: 30px;
border-radius: 50%;
background-color: transparent;
border-bottom: 1px solid black;
margin-top: -20px;
}
<div>
<div class="smile" style="margin-left: 3px;">
<div class="eyes"></div>
</div>
<div class="smile">
<div class="eyes"></div>
</div>
<div class="circle"></div>
</div>
效果图: