Can I Ellipse A Clipping Mask On The Bottom Only?

I am trying to create a curved clipping mask on an image in CSS. The curve is essentially just the bottom half of a very wide ellipse. A requirement is that the angle/curvature doe

Solution 1:

Attempt 6: transparent :before with mega-border + overflow

Issue: has fixed size but works so long as larger than site width/image height! Feels dirty though...

Note: whilst the curves do not look equal, they are all accurate chunks of the same curvature/angle.

div { position: relative; display: inline-block; overflow: hidden; }
img { max-width: 100%; vertical-align: top; }

div:before { 
  content: ""; 
  position: absolute; 
  bottom: -100px; 
  left: 50%; 
  margin-left: -900px;
  height: 1000px;
  width: 1600px;
  border-radius: 100%; 
  border: 100px solid #fff;
}

<div><imgsrc="http://placehold.it/320x120" /></div><div><imgsrc="http://placehold.it/480x240" /></div><div><imgsrc="http://placehold.it/100x220" /></div>

Hat-tip: http://jonmifsud.com/blog/inverse-border-radius-in-css/