CSS, Clip inner circle to image

Question

I'm trying to use a "clip path" on an image with a rounded bottom section. I try with svg clip paths, but the cut it's a outer circle ,i don't know if is the best approach because the clip is outer and not inner what do you recommend to achieve this?

I want to achive this ->

This is the codepen where i try to make it:

.section-test {
  padding: 25px 0;
  background-image: url(https://res.cloudinary.com/ddioeulgw/image/upload/v1548437500/test/hero.png);
  background-size: cover;
  height: 85vh;
  clip-path: ellipse(85% 100% at 50% 0%);
}

<section class="section-test">

</section>

https://codepen.io/kenmarquez-the-typescripter/pen/ombege

I want to achive this ->

Oh, that code is just a hack to get the code pen link..... Stackoverflow has snipplets which allows you to paste your actual code into the post and have it run. — epascarello, Jan 25 '19 at 17:50
I edited it to have the HTML/CSS so you do not get pinged.... — epascarello, Jan 25 '19 at 17:53
@epascarello thank's do you know how to show the banner image that i want to achive? — Ken Marquez, Jan 25 '19 at 18:00
https://stackoverflow.com/questions/8503636/transparent-half-circle-cut-out-of-a-div — epascarello, Jan 25 '19 at 18:08

enxaneta · Accepted Answer · 2019-01-25T18:42:21.820

This is how I would do it: I would use an SVG element. The clipPath have clipPathUnits="objectBoundingBox" and the path have all it's values between 0 and 1.

svg{position:absolute}
.section-test {
  padding: 25px 0;
  background-image: url(https://res.cloudinary.com/ddioeulgw/image/upload/v1548437500/test/hero.png);
  background-size: cover;
  height: 85vh;
  clip-path: url(#clip); 
  }

<svg height="0" width="0" >
    <defs>
         <clipPath id="clip" clipPathUnits="objectBoundingBox">
           <path d="M0,0 L0,.5 A1,1 0 0  1 1,.5 L1,0 0,0" />
        </clipPath>
    </defs>
</svg>
 
<section class="section-test">
</section>

I hope it helps.

clipPathUnits="objectBoundingBox": This value indicates that all coordinates inside the element are relative to the bounding box of the element the clipping path is applied to. It means that the origin of the coordinate system is the top left corner of the object bounding box and the width and height of the object bounding box are considered to have a length of 1 unit value.

MDN quote

CSS, Clip inner circle to image

1 Answers1