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

M

mosquito87

Lieutenant

Registriert

Aug. 2006

Beiträge

980

• 13. Februar 2015

• #1

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)

 

B

blablub1212

Rear Admiral

Registriert

Sep. 2009

Beiträge

5.818

• 13. Februar 2015

• #2

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

 

G

Gajel

Banned

Registriert

Mai 2010

Beiträge

1.146

• 13. Februar 2015

• #3

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

 

D

Daaron

Fleet Admiral

Registriert

Dez. 2011

Beiträge

13.487

• 13. Februar 2015

• #4

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.