CSS，将内圈剪辑到图像

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

Answer 1

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