尖角弯曲的背景图像

Question

been thinking of what would be the best way to achieve a background image with a sharp corners. I tried some css like border-radius and clip-path but no luck. I guess clip-path is the nearest possible answer but can't get it. Please see my sample below.

 .main-header { background: url('http://placehold.it/150x150') no-repeat center center; background-position: 0% 33%; background-size: cover; min-height: 480px; border-radius: 0 0 45% 45%; } 

 <div class="main-header"> <br> </div> 

I'm looking to have below image.

Answer 1

if you can use image by img, not background. I think you can try "clip-path" as below.

Codepen example

HTML:

<div class="main-header">
   <img src="http://placehold.it/150x150">
</div>

CSS:

img {
        -webkit-clip-path: circle(100% at 50% 0);
        clip-path: circle(100% at 50% 0);
    }

and this site is useful to make clip-path ( http://bennettfeely.com/clippy/ )

Answer 2

You can use below code for it

Add border-bottom-left-radius:60% 30%; border-bottom-right-radius:60% 30%; border-bottom-left-radius:60% 30%; border-bottom-right-radius:60% 30%; css. You can play with radius properties to know how it works..

 .main-header { background: url('http://placehold.it/150x150') no-repeat center center; background-position: 0% 33%; background-size: cover; min-height: 480px; border-bottom-left-radius:60% 30%; border-bottom-right-radius:60% 30%; } 

 <div class="main-header"> <br> </div> 

Answer 3

How about this approach? JSBin

 body { background: white; margin: 0; } .main-header { background: url('http://www.stevensegallery.com/g/400/200') no-repeat center center; background-position: center; background-size: cover; min-height: 480px; position: relative; } .main-header::after { content: ''; display: block; position: absolute; background: transparent; /* You can play around with these numbers to adjust the curve */ bottom: -4rem; left: -25%; width: 150%; height: 400px; border-bottom: solid 4rem white; border-radius: 0 0 50% 50%; } 

 <div class="main-header"> <br> </div>