你怎么能只使用 CSS 创建一个空圆圈？

Question

我想在 CSS/SASS 中创建一个空的半圆，这是我的半圆代码片段，这是输出：

.half-circle{
width: 60px; 
height: 120px; 
border-radius: 60px 0 0 60px;
background: #15DEA5;
}

<body>

<div class ="half-circle"></div>
</body>

但我想从内部“清空”它，这是我想要实现的结果的屏幕截图：

那么可以在CSS中创建一个空的半圆吗？

Answer 1

 .half-circle {
        width: 60px;
        height: 120px;
        border-top-left-radius: 110px;
        border-bottom-left-radius: 110px;
        border: 10px solid gray;
        border-right: 0;
    }

HTML:

   <body>
        <div class ="half-circle"></div>
   </body>

演示：https://jsfiddle.net/0zk8euj9/

Answer 2

.circle {
  --height: 200px;
  --width: calc(var(--height) / 2);
  width: var(--width);
  height: var(--height);
  border: 10px solid blue;
  border-top-left-radius: calc(var(--width) * 1.5);
  border-bottom-left-radius: calc(var(--width) * 1.5);
  border-right: 0;
}

Codepen

你怎么能只使用 CSS 创建一个空圆圈？

How can you create an empty circle using exclusively CSS?

html

css

sass

geometry