CSS半圈（边框，仅限轮廓）

Question

我尝试使用CSS创建一个圆圈，看起来与下图完全相同：

...只有一个div：

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

并使用仅限CSS 定义。没有SVG，WebGL，DirectX，[...]允许。

我试图用另一个div绘制一个完整的圆圈并将其中的一半淡化，但它确实有效，但我正在寻找更优雅的替代方案。

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;
}

<强> WORKING DEMO

或者，您可以在框中添加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;
}

<强> UPDATED DEMO 即可。 （ Demo 没有背景色）

Answer 2

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

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

下面是实现效果的最少代码。

由于border-radius以百分比表示，因此它也可以响应。

.semi-circle{
width: 200px;
height: 100px;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
border: 10px solid #000;
border-bottom: 0;
}

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

Answer 4

试试这个：

.top {
  height: 30px;
  width: 30px * 2;
  border-top-left-radius: 30px * 2;
  border-top-right-radius: 30px * 2;
}

 <div class="top"></div>