CSS Banderolen-Effekt

[rony]

hio,

ich habe jetzt schon mehrfach einen schönen effekt gesehen - ich nenne ihn mal "Banderolen-Effekt".

auf The Verge, kann man diesen sehen.
Dort gibt es eine kleine Überschrift: Today's top stories in 90 seconds

Dort sieht es so aus, als würde der orange hintergrund, aus dem "hintergrund" hervorkommen - lässt sich soetwas mittles CSS lösen?

http://www.theverge.com/

 

[unre4l]

Statisch ja, dynamisch muss wohl Javascript etwas nachhelfen.
Das Dreieck lässt sich mit dem border Attribut darstellen.

 

[T0a5tbr0t]

Man muss dazu etwas in die "Trickkiste" greifen, aber es geht mit CSS3 alleine. Das kleine Dreieck unten links ist mit einem :after Element realisiert. Das hat an zweit seiden einen Farbigen Rand und zwei Transparente. Ist ein netter Trick, hier ein paar nette Beispiele.

 

[palace4d]

Auf TheVerge ist der Effekt eine Mix aus CSS3 und JavaScript.
Die reine Umsetzung mit CSS3 ist ebenso möglich. Der Nachteil ist der erhöhte Wartungsbedarf.

Hier noch ein paar Umsetzungen ähnlicher Art mit CSS3
http://www.cssplay.co.uk/

Hier noch ein Artikel zum Erzeugen von geometrischer Formen:
http://t3n.de/news/css-pseudoelemen...m_campaign=Feed:+aktuell/feeds/rss+(t3n+News)

 

[unre4l]

Dreiecke lassen sich bereits mit CSS1 darstellen.

 

[Speedy.]

Der richtige Name dafür lautet übrigens Ribbon. Wenn du das in Google zusammen mit CSS3 eingibst, erscheinen ein paar gute Seiten. Hier mal eines der ersten Ergebnisse:
http://www.sitepoint.com/pure-css3-ribbons/