我需要做的是在下面的图片:
我根本不想使用 SVG。我认为这是两个边界半径为 50% 的 div。但是我如何像在图像上一样合并它们?你能解决这个问题或提供建议吗?
这是最简单的方法,也许您可以根据需要对其进行改进
#main {
width: 80px;
border-radius: 50%;
height: 80px;
border: 3px solid blue;
}
#background {
background: grey;
border-radius: 50%;
width: 100%;
height: 100%;
position: relative;
z-index: 2;
}
#small {
background: grey;
width: 30px;
border-radius: 50%;
height: 30px;
border: 3px solid blue;
margin-top: -30px;
margin-left: 50px;
}
<div id="main">
<div id="background"></div>
</div>
<div id="small"></div>