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

工作演示.

或者,您可以添加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;
}

更新的演示.(没有背景颜色的演示)

Answer 2

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

这也可以响应地工作，因为它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 3

不久前我有类似的问题,这就是我解决它的方法

.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>

Answer 4

我使用百分比方法来实现

        border: 3px solid rgb(1, 1, 1);
        border-top-left-radius: 100% 200%;
        border-top-right-radius: 100% 200%;