这是我想要的样子:
我意识到这是一个丑陋的模型,显然当我真正这样做时,比例看起来会更好,但我想知道您将如何使用 CSS 来实现这一点。
fiddle 在这里 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;
}
最佳答案
使用: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 中删除。
这是一个 fiddle :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;
}
fiddle (为清楚起见,红色半圆):http://jsfiddle.net/x4mdC/
关于 :before
和 :after
的更多信息:http://www.w3.org/TR/CSS2/selector.html#before-and-after
关于html - 如何在标题的底部中间添加一个半圆?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18033468/