如何仅使用HTML CSS制作圆圈？

我有上面的图片，我想用HTML CSS制作这个圆形结构

HTML:

请帮助我使用HTML CSS创建上面图像的圆形内部结构，提前感谢：）

使用此CSS

阴阳 宽度：96px； 高度：48px； 背景：#eee； 边框颜色：红色； 边框样式：实心； 边框宽度：2px2px50px2px； 边界半径：100%； 位置：相对位置； } #阴阳：在{ 内容：“； 位置：绝对位置； 顶部：50%；左侧：0； 背景：#eee； 边框：18px纯红； 边界半径：100%； 宽度：12px； 高度：12px； } #阴阳：之后{ 内容：“； 位置：绝对位置； 最高：50%； 左：50%； 背景：红色； 边框：18px实心#eee； 边界半径：100%； 宽度：12px； 高度：12px； }

---

阴阳-干得好@Harry:）非常感谢@Harry:）@Harry，你应该加上这个作为答案@KarlGjertsen：感觉很奇怪，因为这不是我的代码，而且在网上很容易找到。如果你指明你的来源会更好。

<div class="circle"></div>

.circle {
   width: 96px;
   height: 96px;
   background: #eee;
   border-color: red;
   border-style: solid;
   border-radius: 100%;
   position: relative;
}