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

我正在尝试使用 CSS 创建一个圆圈，如下图所示：

...只有一个div:

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

并通过使用only CSS定义。不允许使用 SVG、WebGL、DirectX 等。

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

你可以使用border-top-left-radius and 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;
}

更新的演示. (Demo无背景色）