CSS Div Ecke "abschneiden" und umklappen

[Cool Master]

Moin,

ich stehe aktuell vor einem Rätsel wie kann man so etwas machen wie im Anhang verlinkt?

Mit Border-radius gehts ja schlecht da man dadurch nur abrundet. Gibt es da sonst ein Trick dafür oder muss ich wirklich auf eine Grafik setzen?

 

[Daaron]

cleverer Einsatz der Pseudo-Elemente :before und :after.

 

[tiwa86]

Hier werden Formen via CSS gebaut. Auch Dreiecke sind möglich. Über "transform: rotate" könnte man sicherlich auch oben die Knickoptik hinkriegen: http://t3n.de/news/css-geometrische-figuren-reinem-358616/

 

[DHundt]

Mahlzeit,

Wenn es ein einfarbiges, rechteckiges Dreieck ist, kann man das auch via "border" basteln.
Also:
Äußeres Div mit Text und darin nochmal ein Div in der rechten oberen Ecke, was quasi nur aus "border" besteht.

Gruß

 

[Cool Master]

Na ja, eine Chance mich damit zu befassen Hatte damit noch nicht wirklich viel am hut, abgesehen von "|" hinter Menüs zu stopen.

 

[Jojo_44]

http://designshack.net/articles/css/code-a-simple-folded-corner-effect-with-css/

Jojo

 

[Cool Master]

@Jojo_44

Cool, danke für den Link! Sogar noch schön erklärt