Abgerundetes Heroimage

  • 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
    1.     border-bottom-left-radius: 10% 200px;
    2. border-bottom-right-radius: 10% 200px;


    Das ist das komplette Hero

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


    Eine Idee ?


    Grüße Mike

  • 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
    1. border-bottom-left-radius: 80% 250px;
    2. border-bottom-right-radius: 80% 250px;
  • 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.