完美的圆形边框

时间:2016-07-19 07:23:56

标签: css css3 border

对于一个新的Wordpress模板,我设计了(在Photoshop中)一个与下面的图像重叠的圆形标题。

设计:

enter image description here

我的尝试:

enter image description here

代码:

现在,我使用边框半径,因为我想在CSS中执行此操作而不是剪切图像(也是出于响应原因)。

border-radius: 100% / 100%;

无论我如何更改数值,边框都不会变得很圆润。

到目前为止的网站:http://voorbeeld.website/19/

也许我在Photoshop中有点太有创意,但没有什么是不可能的!对?

1 个答案:

答案 0 :(得分:5)

使用伪元素,在这种情况下我使用了:before

确保.wrapper的元素也有一个位置,relativeabsolute,或者您需要将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>