Html 带 CSS 的半圆（仅边框、轮廓）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22415651/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Half circle with CSS (border, outline only)
提问by Dyin
I'm trying to create a circle with CSS, which looks exactly like on the following picture:
我正在尝试使用 CSS 创建一个圆，它看起来与下图完全一样：
...with only one div:
...只有一个div：
<div class="myCircle"></div>
and by using only CSSdefinitions. No SVG, WebGL, DirectX, [...] allowed.
并且仅使用CSS定义。不允许使用 SVG、WebGL、DirectX、[...]。
I've tried to draw a full circle and fading half of it with another div, and it does work, but I'm looking for a more elegant alternative.
我试图画一个完整的圆圈，然后用另一个 将它的一半褪色div，它确实有效，但我正在寻找一个更优雅的替代方案。
回答by Hashem Qolami
You could use border-top-left-radiusand border-top-right-radiusproperties to round the corners on the box according to the box's height (and added borders).
您可以使用border-top-left-radius和border-top-right-radius属性根据框的高度（和添加的边框）使框的角变圆。
Then add a border to top/right/left sides of the box to achieve the effect.
然后在框的顶部/右侧/左侧添加边框以实现效果。
Here you go:
干得好：
.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;
}
工作演示。
Alternatively, you could add box-sizing: border-boxto the box in order to calculate the width/height of the box including borders and padding.
或者，您可以添加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. (Demowithout background color)
回答by mariomc
I had a similar issue not long time ago and this was how I solved it
不久前我遇到了类似的问题，这就是我解决的方法
.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>回答by u8980200
I use a percentage method to achieve
我使用百分比方法来实现
border: 3px solid rgb(1, 1, 1);
border-top-left-radius: 100% 200%;
border-top-right-radius: 100% 200%;
回答by Felix A J
Below is a minimal code to achieve the effect.
下面是实现效果的最小代码。
This also works responsively since the border-radiusis in percentage.
这也可以响应，因为它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>