Background image with a colored curved border at the bottom

问题

I am trying to achieve this with css3, I tried using border-radius with percent values and it's not the same always, I always got a rounded corners and the border will start disappearing on the corners too.

I want it to be exactly the same as the example image:

EDIT: this is my html code :

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

And this is my css:

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

回答1:

If you want, you can accomplish this using only CSS by creating a <div> that would be used only as a mask. You can create the round effect with the border-radius property, but you need to do it bigger than the part that will be visible, then crop the result to show only the curvy part that you want. And you must compensate the imagem position.

Check my example below:

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

来源：https://stackoverflow.com/questions/49863045/background-image-with-a-colored-curved-border-at-the-bottom

标签

css

svg

border

clip