如何在我的标题的底部中间添加一个半圆？答案

【问题标题】：How to add a half circle at the bottom middle of my header?如何在我的标题的底部中间添加一个半圆？
【发布时间】：2013-08-04 16:51:35
【问题描述】：

这是我想要的样子：

我意识到这是一个丑陋的模型，显然当我真正做到这一点时，比例看起来会更好，但我想知道你将如何使用 CSS 来做到这一点。

小提琴在这里http://jsfiddle.net/bU3QS/1/

<div class="header">
    </div>

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #000;
    z-index: 10000;
    height: 110px;
    overflow: hidden;
}

【问题讨论】：

标签： html css shapes css-shapes

【解决方案1】：

使用:after 伪元素：

.header:after {
    content: '';
    position: absolute;
    background: black;
    width: 50px;
    height: 50px;
    z-index: 1;
    border-radius: 50%;    /* Makes the element circular */
    bottom: -25px;
    left: 50%;
    margin-left: -25px;
}

对于此解决方案，overflow: hidden; 已从 .header CSS 中删除。

这是一个小提琴：http://jsfiddle.net/t97AX/

这是另一种方法，它不依赖半圆的宽度来正确居中：

.header:after {
    content: '';
    position: relative;
    top: 100%;
    display: block;
    margin: 0 auto;
    background: red;
    width: 50px;
    height: 25px;
    border-radius: 0 0 50px 50px;
}

小提琴（为了清楚起见，红色半圆形）：http://jsfiddle.net/x4mdC/

更多关于:before和:after：http://www.w3.org/TR/CSS2/selector.html#before-and-after

【讨论】：

这样，您不需要在标题中添加更多元素。
赞成，因为这是迄今为止最优雅的解决方案，不需要额外的标记（另外，像这样的风格项目不应该在标记中开始）:)
使用border-radius: 50%; 只是为了确定何时编辑尺寸。
谢谢@Nick！我很确定border-radius 不一定是元素的全宽，因为它是半径，而不是直径。我错过了什么吗？
@Michael 非常好。但那样border-radius percent 解决方案就行不通了。

【解决方案2】：

使用:after 和border-radius 创建半圆。

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #000;
    height: 110px;
    }
.header:after {
    content: '';
    background-color: red;
    position: absolute;
    display: block;
    width: 100px;
    top: 110px;
    left: 50%;
    margin-left: -50px;
    height: 50px;
    border-radius: 0 0 50px 50px;
}

演示：http://jsfiddle.net/bU3QS/2/

【讨论】：

【解决方案3】：

<div class="header">
    <div class="circle">
    </div>
    </div>
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #000;
    height: 110px;
}

.circle {
    height: 100px;
    width: 100px;
    border-radius: 100px;
    background-color: black;
    margin: auto;
    position: relative;
    top:45px;
}

在行动：http://jsfiddle.net/NickWilde/ngcce/

【讨论】：

这不应该是答案，除非您需要使用 javascript 与圈子进行交互。它不是内容而是装饰，应该使用:after 伪元素。
如果它在我自己的网站上，我肯定会使用 div 然后设置样式而不是使用 after 这样我就可以在不进入样式外部文件的情况下看到为什么会有一个圆圈某处。 After 可能有它的用途，但我不喜欢没有在文件之间来回切换的情况下没有相对明确的理由。
在大多数浏览器调试工具（F12）上都能看到伪元素
是的，我知道；除非有一些我不知道的性能改进，否则对我来说这是个人偏好 - 我的意思是，如果我看到一个很好的论据说明为什么使用 :after 总是更好，那么我可能会改变我的偏好。