带CSS的半圆（仅限边框，轮廓） [英] Half circle with CSS (border, outline only)

问题描述

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

I'm trying to create a circle with CSS, which looks exactly like on the following picture:

...只有一个 div ：

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

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

and by using only CSS definitions. No SVG, WebGL, DirectX, [...] allowed.

我试图绘制一个完整的圆，并用另一个 div ，它会工作，但我正在寻找一个更优雅的选择。

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.

推荐答案

您可以使用 border-top-left- radius 和 border-top-right-radius 属性，根据框的高度（以及添加的边框）对框的四个角进行四舍五入。

You could use border-top-left-radius and border-top-right-radius properties to round the corners on the box according to the box's height (and added borders).

然后在框的顶部/右侧/左侧添加边框以实现效果。

Then add a border to top/right/left sides of the box to achieve the effect.

这里：

.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 以计算宽度/ box的高度，包括边框和填充。

Alternatively, you could add box-sizing: border-box to the box in order to calculate the width/height of the box including borders and padding.

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

更新的演示 。 （ 演示 ，无背景颜色）

这篇关于带CSS的半圆（仅限边框，轮廓）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！