对于一个新的Wordpress模板,我设计了(在Photoshop中)一个与下面的图像重叠的圆形标题。
设计:
我的尝试:
代码:
现在,我使用边框半径,因为我想在CSS中执行此操作而不是剪切图像(也是出于响应原因)。
border-radius: 100% / 100%;
无论我如何更改数值,边框都不会变得很圆润。
到目前为止的网站:http://voorbeeld.website/19/
也许我在Photoshop中有点太有创意,但没有什么是不可能的!对?
答案 0 :(得分:5)
使用伪元素,在这种情况下我使用了:before
确保.wrapper
的元素也有一个位置,relative
或absolute
,或者您需要将z-index: -1
设置为:before
.wrapper {
position: relative;
height: 200px;
overflow: hidden;
}
.wrapper:before {
content: '';
position: absolute;
top: -200px;
left: -10%;
width: 120%;
height: 400px;
background: lightgray;
border-radius: 50%;
}
.content {
position: relative;
padding: 20px;
text-align: center;
}
<div class="wrapper">
<div class="content">
Put your content here
</div>
</div>