带 CSS 的半圆（边框，仅轮廓）

Question

我正在尝试使用 CSS 创建一个圆圈，它看起来与下图完全一样：

…只有一个 div ：

 <div class="myCircle"></div>

并且 只使用 CSS 定义。不允许使用 SVG、WebGL、DirectX、[…]。

我试着画一个完整的圆圈，然后用另一个 div 淡出一半，它确实有效，但我正在寻找更优雅的替代方案。

原文由 Dyin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 border-top-left-radius 和 border-top-right-radius 属性根据框的高度（和添加的边框）对框的角进行圆角处理。

然后在框的顶部/右侧/左侧添加边框以实现效果。

干得好：

 .half-circle {
    width: 200px;
    height: 100px; /* as the half of the width */
    background-color: gold;
    border-top-left-radius: 110px;  /* 100px of height + 10px of border */
    border-top-right-radius: 110px; /* 100px of height + 10px of border */
    border: 10px solid gray;
    border-bottom: 0;
}

工作演示。

或者，您可以将 box-sizing: border-box 添加到框中，以计算框的宽度/高度，包括边框和填充。

 .half-circle {
    width: 200px;
    height: 100px; /* as the half of the width */
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border: 10px solid gray;
    border-bottom: 0;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

更新演示。 （没有背景颜色 的演示）

原文由 Hashem Qolami 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

不久前我遇到了类似的问题，这就是我解决的方法

 .rotated-half-circle {
  /* Create the circle */
  width: 40px;
  height: 40px;
  border: 10px solid black;
  border-radius: 50%;
  /* Halve the circle */
  border-bottom-color: transparent;
  border-left-color: transparent;
  /* Rotate the circle */
  transform: rotate(-45deg);
}

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

原文由 mariomc 发布，翻译遵循 CC BY-SA 3.0 许可协议