CSS半圈（边框，仅轮廓）

73

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

在此处输入图片说明

...只有一个div：

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

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

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

html css css-shapes

— 染料
source

3

“人们总是在没有任何其他理由的情况下就怀疑新观点，并且通常会提出反对，但这是因为它们并不普遍。” ―约翰·洛克

— zero_cool，2016年

2

@Dyin-该问题可能已经得到改善，因为您编写了“我正在尝试使用CSS创建圆”，但是您无法共享尝试的代码，并且正在请求代码。长期使用SO的用户不喜欢这样，因为他们认为您还没有尝试过任何东西，正在寻找可以为您完成工作的人。这已在SO的常见问题解答中概述，并且已经存在很多年了。我不是这里的规则的坚持者，我只是在解释为什么您最初一票否定，然后回答您的问题“我应该如何改善这个问题？”。这个问题提供了一些很好的信息，非常感谢。

— 马丁·詹姆斯

2

@MartinJames我非常不同意。我已经解释了我的方法-当然没有附加任何代码，但是我看不出失败的代码如何以任何方式改善该问题。这个问题显然与任何代码片段中的问题都不相关。您可能证明该问题的措辞可以更好，用一段不成功的代码可以更清楚地陈述，但是我仍然持怀疑态度。此外，如果发问者未能提供初始代码，我建议您不要投下一个问题。任何人都容易发生这种情况。同样，没有一个下议院投票者建议对该问题进行任何改进。

— Dyin

我和马丁在一起。您说：“我试图画一个完整的圆圈，但它不起作用，但我正在寻找一种更优雅的选择。” 如果SO的用户不知道您尝试了什么，应该如何提出“更优雅的选择”？替代什么？！您还说过“问题显然与任何代码段中的问题都不相关”，而是，您说编写的代码不起作用！我讨厌这么说，但这也不是争论的地方。您问如何改善您的问题，有人请您回答。如果您不喜欢批评，请不要提出要求。

— TheCarver

1

@TheCarver但是，我认为这里发生的最糟糕的事情是，您在故意编辑报价时使用了引号，以便能够以某种方式证明观点。我让您思考一下这是一个错误的可能性，而您删除的部分显然是将您的论点转为稳定的立场-根本没有。

— Dyin

101

您可以使用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;
}

更新的演示。（演示没有背景色）

— 哈希姆·夸拉米
source

比我的方法好得多。删除我的答案。

— Paul Roub 2014年

6

不要删除它。这是另一种方法！

— MiljanPuzović2014年

@PaulRoub IMO，我的方法并不优于您，因为它们都无法在IE8及更低版本中使用：）（由于border-radius财产）

— Hashem Qolami 2014年

1

很棒，正是我想要的。谢谢！

— michal '17

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

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

展开摘要

— 马里奥姆
source

6

我使用百分比方法来实现

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

— 朱钰鹏
source

这仅显示一个半实心圆，而不是一个半轮廓线。

— ioCron

1

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

由于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>

展开摘要

— 费利克斯·阿杰
source