css - 底部带有彩色弧形边框的背景图片

Question

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

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

编辑:这是我的 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 创建圆形效果属性，但您需要将其做得比可见部分更大，然后裁剪结果以仅显示您想要的 flex 部分。而且你必须补偿imagem的位置。

检查下面的示例:

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