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

【问题标题】：Background image with a colored curved border at the bottom底部带有彩色弯曲边框的背景图像
【发布时间】：2018-04-17 05:49:40
【问题描述】：

我正在尝试使用css3 来实现这一点，我尝试使用带有百分比值的border-radius，但并不总是一样，我总是有一个圆角，边框也会在角落开始消失。

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

编辑：这是我的 html 代码：

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

这是我的 CSS：

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

【问题讨论】：

标签： css svg border clip

【解决方案1】：

如果您愿意，您可以通过创建一个仅用作掩码的<div> 仅使用 CSS 来完成此操作。您可以使用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>

【讨论】：

@MohamedEttayeb 要给出比我更具体的答案，我需要知道标题的宽度和高度，即使我只是为你组装代码，主要的想法是在我的已经回答了。
我正在全屏工作，宽度为 100%，高度是动态的
@MohamedEttayeb 好的，我已将所有测量值更改为相对测量值，除了高度，您可以手动更改它，看看它是否对您有帮助。图片的位置可能会发生变化，您需要进行测试。
我的 html 代码中没有图像，它是背景图像
你能把它应用到我的html代码上吗？因为我不能让它工作