Abgerundetes Heroimage

Dropthemike · 4. März 2020

Hallo, sitze grad an was... zwar möchte ich mein Heroimage unten abgerundet haben so wie im Screenshot versucht habe ich es bereits mit

Code

border-bottom-left-radius: 10% 200px;
border-bottom-right-radius: 10% 200px;

Das ist das komplette Hero

Code

.heroheader{
background-image: url(papier1.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
width: 100vw;
border-bottom-left-radius: 10% 200px;
border-bottom-right-radius: 10% 200px;
}

Alles anzeigen

Es wird aber nicht so dargestellt, die linke Seite hat trotzdem eine andere rundung als die rechte.

Eine Idee ?

Grüße Mike

Sempervivum · 4. März 2020

Bei mir sind beide Seiten gleich, allerdings sieht die Rundung ganz anders aus als auf deinem Screenshot. Hast Du Scollbars? Wenn ja, ist das möglicher Weise eine Täuschung und kann behoben werden, indem Du body ein margin: 0; gibst.

Dropthemike · 4. März 2020

Sempervivum schrieb:

Bei mir sind beide Seiten gleich, allerdings sieht die Rundung ganz anders aus als auf deinem Screenshot. Hast Du Scollbars? Wenn ja, ist das möglicher Weise eine Täuschung und kann behoben werden, indem Du body ein margin: 0; gibst.

Sehr merkwürdig, stimmt sogar... argh... ist mir das jetzt peinlich... jedoch dann ne andere Frage wie bekomme ich eine solche Rundung hin ? meine sieht immer sehr mies aus..

Code

border-bottom-left-radius: 80% 250px;
border-bottom-right-radius: 80% 250px;

Sempervivum · 4. März 2020

Ja, bei mir sieht das auch so aus, die Rundung ist mehr elliptisch. Man kann sie rund bekommen mit clip-path:

clip-path: circle(200% at 50% -100%);

aber anscheinend ist die y-Position des Kreises der Prozentwert der Breite und nicht der Höhe, so dass man Probleme bekommt, das Ganze responsiv zu bekommen. Kein Problem ist es, wenn der Container entweder quadratisch ist oder eine feste Höhe hat.