完美的圆形边框

Question

对于新的 Wordpress 模板，我（在 Photoshop 中）设计了一个 round-ish header 与下面的图像重叠。

设计：

我的尝试：

代码：

现在，我正在使用边框半径，因为我想在 CSS 中使用它而不是剪切图像（也是出于响应原因）。

border-radius: 100% / 100%;

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

目前网站：http://voorbeeld.website/19/

也许我在 Photoshop 中有点太有创意了，但没有什么是不可能的！正确的？

Answer 1

使用伪元素，本例中我使用了: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>

完美的圆形边框

The perfectly rounded border

css

border