Zaokrąglona stopka, chowanie elementu za widoczne pole przeglądarki Opcje

[jakistyp]

Chciałbym osiągnąć taki efekt: http://postimg.org/image/cawr03tgh/

Próbowałem w ten sposób:

Kod

footer {
    background-color: #1f2e4a;
    width: 100%;
    height: 150px;
    border: 6px solid #488dab;
    border-radius: 75%;
    position: absolute;
}

Działałem na samej opcji w HTML <footer>

Oczywiście moim sposobem to wychodzi pół na pół. 50% obrazka w poziomie powinno być schowane za polem widzenia wtedy efekt wyszedłby bez problemu. Niestety pojawiają się suwaki, nie mogę tego elementy schować.

Prawdopodobnie albo źle kombinuje albo źle to rozpisałem.

[jakistyp]

tak nie czytelne ze mi sie nawet nie chce pokazywac jak powinno byc.

Stary to po co się udzielasz jak nie chcesz pomóc. Zgrywasz tu cwaniaka czy co chcesz mi pokazać?
Chcę to zrobić tak jak należy a nie tak jak potrafię... chodzi mi o naukę, nie wiem co tam masz nieczytelnie wykonane.

http://jsfiddle.net/d1n8pnw4/ proszę baw się ale nie licz na super efekty, chyba że zabawa z svg ale to dla czegoś takiego mija się z celem myślę smile.gif

Dziękuje bardzo to mnie naprowadza na właściwy tor. Projekt nie ma znaczenia, to nie moje... ja tylko ćwiczę na tym html/css. Znalazłem sobie w sieci łebka co potrzebował kodera jego szablonu pod darmowy silnik gierki. Ja mu pomagam przy tym się uczę.

//EDIT
com pomimo, że napisałeś nie licz na super efekty osiągnąłem dokładnie takie jak na obrazku, złoto dla Ciebie. Pozdrawiam.

Ten post edytował jakistyp 6.03.2015, 18:35:42