Sharp Ecke gekrümmten Hintergrundbild

Question

wurde überlegt, was wäre der beste Weg, um ein Hintergrundbild mit scharfen Ecken zu erreichen. Ich habe versucht, einige CSS wie border-radius und clip-path aber kein Glück. Ich denke clip-path ist die nächste mögliche Antwort, aber kann es nicht bekommen. Bitte sehen Sie sich mein Beispiel an.

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

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

Ich bin auf der Suche unten Bild zu haben.

Answer 1

Wie wäre dieser Ansatz? JSBin

body { 
 
    background: white; 
 
    margin: 0; 
 
} 
 

 
.main-header { 
 
    background: url('http://www.stevensegallery.com/g/400/200') no-repeat center center; 
 
    background-position: center; 
 
\t 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>

Answer 2

Wenn Sie Bild von IMG, nicht Hintergrund verwenden können. Ich denke du kannst "clip-path" wie unten versuchen.

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); 
    } 

und diese Seite ist nützlich, um Clip-Pfad (http://bennettfeely.com/clippy/)

Answer 3

Sie können Code unten verwenden zu machen es

Fügen Sie border-bottom-left-radius:60% 30%; border-bottom-right-radius:60% 30%; css hinzu. Sie können mit einem Radius von Eigenschaften zu wissen, spielen, wie es funktioniert ..

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

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