如何在我的标题的底部中间添加一个半圆? [英] How to add a half circle at the bottom middle of my header?
问题描述
这是我想要的样子:
我意识到这是一个丑陋的模型,显然当我这样做真的比例会看起来更好,但我想知道如何
I realize this is an ugly mockup and obviously when I do it for real the proportions will look better, but I am wondering how you would go about doing this with CSS.
fiddle在这里 http://jsfiddle.net/bU3QS/1/
fiddle is here 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;
}
推荐答案
c>:之后伪元素:
Use the :after
pseudo element:
.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; code>已从
.header
CSS中移除。
For this solution, overflow: hidden;
has been removed from the .header
CSS.
这里是一个小提琴: http://jsfiddle.net/t97AX/
这是另一种方法,不依赖于半圆的宽度将其正确定位:
Here's another approach, that doesn't rely on the width of the semicircle to center it properly:
.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/
The fiddle (semicircle red for the sake of clarity): http://jsfiddle.net/x4mdC/
更多:之前
和:之后
: http://www.w3.org/TR/CSS2/selector.html#before-and-after
这篇关于如何在我的标题的底部中间添加一个半圆?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!