HTML – 如何在标题的底部中间添加半圈？

概述以下是我希望它的外观： 我意识到这是一个丑陋的模型,显然当我真正做到这一点时,比例看起来会更好,但我想知道如何用CSS做这件事. 小提琴在这里http://jsfiddle.net/bU3QS/1/ <div class="header"> </div>.header { position: fixed; top: 0; left: 0; width: 以下是我希望它的外观：

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

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

<div >    </div>.header {    position: fixed;    top: 0;    left: 0;    wIDth: 100%;    background: #000;    z-index: 10000;    height: 110px;    overflow: hIDden;}

解决方法 使用：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;}

对于这个解决方案,溢出：隐藏;已从.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/

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

总结

以上是内存溢出为你收集整理的HTML – 如何在标题的底部中间添加半圈？全部内容，希望文章能够帮你解决HTML – 如何在标题的底部中间添加半圈？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。