效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ff52c60229e4cf8a95c815a8b2abcdc2.png)
css
<style>
.aaa{
width: 100px;
height: 200px;
background-color: #ffffff;
position: absolute;
top: 0;
left: 0;
border-color: #000000;
border-style: solid;
border-width: 1px 100px 1px 1px;
border-radius: 50%;
}
.aaa::before {
content: ' ';
width: 20px;
height: 20px;
border: 40px solid #ffffff;
background-color: #000;
border-radius: 50%;
position: absolute;
left: 50px;
top: 0;
}
.aaa::after {
content: '';
background-color: #ffffff;
width: 20px;
height: 20px;
border: 40px solid #000000;
border-radius: 50%;
position: absolute;
left: 50px;
bottom: 0;
}
</style>
html
<div class="aaa">
</div>