Bottom curved masking on Image using CSS

Question

I am trying to achieve masking on image same as below:

I tried some of the CSS here:

using clip-path: using clip-path codepen

What I tried is:

HTML:

<div class="mask-section">
  <div class="content">
    <h1>This is Test</h1>
  </div>
</div>

CSS:

.mask-section {
    background-color: white;
}
.content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
    border-radius: 0 0 90% 90% / 15em;
  overflow: hidden;
  width: 100%;
  height: 300px;
  background-image: url(https://i.pinimg.com/originals/5e/f6/83/5ef68313994aaf68e87d190de943f104.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.content:before {
  content: '';
  position: absolute;
  background-color: rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.content h1 {
  text-align: center;
  text-transform: uppercase;
  color: white;
  z-index: 0;
}

But it doesn't look as expected, it looks like this:

How can I create the same curved from bottom of the image added? It will be useful if someone can help me on this. I tried similar questions asked here but no luck!

Does this answer your question? [Wavy shape with css](https://stackoverflow.com/questions/17202548/wavy-shape-with-css) — cloned, Sep 16 '22 at 06:27
@cloned don't want wavy, I am not sure what we called that I want! You have given is different one. I have uploaded the codepen, let me know if you can try. — Pathik Vejani, Sep 16 '22 at 06:30
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path this might suit you even better now that I think about it. — cloned, Sep 16 '22 at 06:49
How? What's your exact problem? Where are you stuck with the info I gave you? — cloned, Sep 16 '22 at 06:57
@cloned see the update codepen using `clip-path`, https://codepen.io/pathikvejani/pen/yLjgwbZ It is different from I want. — Pathik Vejani, Sep 16 '22 at 07:02
I can't tell you the exact values. Try around with this https://bennettfeely.com/clippy/ otherwise you will have to use SVG. Or use clip path in svg directly, maybe you have more control over the shape there https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath these are your options I'm afraid, can't think of anything else right now. — cloned, Sep 16 '22 at 12:39
@cloned I tried that link but didn't get the exact. How can I use SVG? clip-path also tried! — Pathik Vejani, Sep 16 '22 at 12:41

Bottom curved masking on Image using CSS

0 Answers0