CSS半圈（边框，仅轮廓）

小编典典

CSS半圈（边框，仅轮廓）

css

我正在尝试使用CSS创建一个圆，

…只有一个div：

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

并仅使用CSS定义。不允许使用SVG，WebGL，DirectX等。

我尝试绘制一个完整的圆，然后将另一个圆与另一个圆淡化div，它确实起作用，但是我正在寻找一种更优雅的选择。

阅读 653

2020-05-16

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

2020-05-16