与一个色的弯曲的边界的背景图象在底部

Question

我正在尝试使用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%;
}

Answer 1

如果需要，可以通过创建仅用作掩码的<div>来仅使用CSS来完成此操作。您可以使用border-radius属性创建圆形效果，但是您需要比可见的部分更大，然后裁剪结果以仅显示您想要的弯曲部分。你必须补偿图像的位置。

检查下面的示例：

＆＃13;

＆＃13;

.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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;