Abgefahrene CSS Shapes

Ich habe gerade eigentlich etwas ganz anderes zum Thema CSS gesucht, und dann was zum Thema Border und CSS gefunden, the Shapes of CSS. Mit CSS und Borders ist ja schon einiges möglich, aber da waren doch Ergebnisse bei, die mich sehr überraschten. Alte Bekannte wie Kreise, oder Dreiecke wirken dagegen auf einmal altbacken 😉

#infinity {
    position: relative;
    width: 212px;
    height: 100px;
}

#infinity:before,
#infinity:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border: 20px solid red;
    -moz-border-radius: 50px 50px 0 50px;
         border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

#infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
         border-radius: 50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

Ihr solltet auf jedenfall mal dort rein schauen, gibt noch viele andere Ideen von diversen Entwicklern, die Euch inspirieren könnten.

Das obige Beispiel ist von:  Nicolas Gallager