Background image with a colored curved border at the bottom

倾然丶 夕夏残阳落幕 提交于 2020-01-30 13:04:29

问题


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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!