CSS Komplexe Shapes mit border-radius?

Hallo zusammen,

Ich habe mehrere rechteckige Grafiken, die ich ausschließlich mit CSS3 Mitteln in verschiedenen Formen bringen will.
Bei allen Formen wird von den Rechtecken mehr oder weniger etwas abgeschnitten.

Ein kleines Beispiel:


Den linken Rand kann ich einfach mit einem border-radius erreichen, z.B.:
Beim rechten Rand ist es im obigen Beispiel schon etwas kniffliger.

Ich weiß, dass ich mit :before und :after auch Einfluss auf die Form nehmen kann[¹]. Da läuft das dann meistens über borders. Allerdings, will ich ja hier eine etwas komplexere Form "abschneiden".

Bin ich mit border-radius hier auf dem richtigen Weg? Oder welche CSS3 Attribute würdet ihr ausschöpfen, um deratiges zu realisieren? Obiges Beispiel ist nur eine von mehreren Formen, die ich umsetzen möchte.

Danke für Tipps und Links für passende Tutorials. Viele CSS3 Tutorials, die ich zu dem Thema finde, laufen leider immer auf border-Modifikationen hinaus, die ja bei Grafiken bedingt sinnvoll sind.


MfG
M.E.

[1]: Wie zum Beispiel hier gezeigt: https://getflywheel.com/layout/create-shapes-css3/

Hi, das hilft dir vielleicht weiter http://bennettfeely.com/clippy/

Schau mal hier:

http://t3n.de/magazin/8-css-tricks-239422/

Gleich oben unter border-radius.

Vielen Dank,

sehr hilfreich!