CSS Word SmartArt (geometrische Figur) mit reinem HTML/CSS/JS realisieren

[mosquito87]

Hallo zusammen,

viele kennen bestimmt die folgende Microsoft Word-SmartArt-Grafik:

Mich würde interessieren, ob es in Zeiten von HTML5 und CSS3 möglich ist, diese Grafik sauber mit besagten Techniken zu realisieren.

Bisher ausprobiert:

• Als Grafik (nicht so gut, da vor allem kleiner Text nicht gut leserlich, außerdem nicht wirklich "responsive")
• Als Tabelle mit Hintergrundgrafik und dann den Text als HTML (nicht sauber, auch nicht "responsive", Probleme mit den vielen unterschiedlichen Browsern)

 

[blablub1212]

Wenn du zusätzlich noch SVG mitnimmst dann geht das: http://www.w3.org/TR/SVG/script.html

wahrscheinlich geht es auch nur mit css aber einfacher definitiv mit vektoren + css

 

[Gajel]

Klar sind ja nur kreise die man zur hälfte sieht. Stichwort border-radius, z-index ...!

 

[Daaron]

Jo, das ist nur etwas Container-Magie... Außen ein Container für den großen Halbkreis, der den Container für den oberen Textblock und einen weiteren Container für die beiden unteren Textblöcke enthält. Selbiger enthält dann wieder 2 Container für die 2 Text-Bereiche.
Der Rest ist Border-Radius und :before/:after - Magie.