底部带有彩色弯曲边框的背景图像

Question

我试图用

css3

来实现这一点，我尝试使用带有百分比值的

border-radius

，但它并不总是一样，我总是有一个圆角，并且边框也会开始在角上消失。

我希望它与示例图像完全相同：

![图片链接][1]

编辑： 这是我的 html 代码:

<div class='container-fluid'>
    <section class='section-1'>
        <div class='container'>
        </div> 
    </section> 
</div>

这是我的CSS：

.section-1 {
    background-image: url('../images/bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background-position: 50%;
}

Answer 1

如果需要，您可以仅使用 CSS 创建一个仅用作遮罩的

<div>

来完成此操作。您可以使用

border-radius

属性创建圆形效果，但您需要将其做得比可见部分更大，然后裁剪结果以仅显示您想要的弯曲部分。并且必须补偿图像位置。

查看下面我的示例：

.oval-header {
  width: 100%;
  height: 150px;
  overflow: hidden;
  position: relative
}

.oval-header--mask {
  width: 200%; /* Mask width 2x the size of the header */
  height: 200%; /* Mask height 2x the size of the header */
  transform: translate(-25%, -51%); /* This compensates the size of the image and places the curvy part that you want on the certer of the mask, it's a translate that negativates half it's width and half it's height */
  border: 6px solid yellow;
  border-radius:  0 0 50% 50%;
  overflow: hidden;
  border-top: 0;
  background-image: url('http://www.placecage.com/3000/1500');
  background-size: cover
}

<div class="oval-header">
  <div class="oval-header--mask">
  </div>
 </div>