{"id":912,"date":"2012-01-09T16:32:31","date_gmt":"2012-01-09T15:32:31","guid":{"rendered":"https:\/\/sgaul.de\/?p=912"},"modified":"2019-06-19T09:55:04","modified_gmt":"2019-06-19T07:55:04","slug":"moderne-pfeile-mit-css","status":"publish","type":"post","link":"https:\/\/sgaul.de\/2012\/01\/09\/moderne-pfeile-mit-css\/","title":{"rendered":"Moderne Pfeile mit CSS"},"content":{"rendered":"

Eigentlich gibt es in HTML genug M\u00f6glichkeiten, einen Pfeil zu realisieren. Der &darr; (\u2193) sollte in allen relevanten Browsern als solcher angezeigt werden. Dennoch wird er kaum genutzt. Vielleicht auch einfach deshalb, weil er nach dem momentanen Empfinden der meisten Webdesigner doch etwas altbacken aussieht. Es gibt aber auch eine M\u00f6glichkeit, mit CSS einen einfachen Pfeil in Dreiecksform umzusetzen, der sich vielleicht besser in moderne Designs einf\u00fcgt.<\/p>\n

Sehen kann man ein solches Beispiel etwa beim Framework \u201eBootstrap\u201c von Twitter:<\/p>\n

\"\"<\/a>
Kleiner Dreieckspfeil ohne Bild: http:\/\/twitter.github.com\/bootstrap\/#navigation<\/figcaption><\/figure>\n

Wie diese Pfeile erstellt werden, l\u00e4sst sich auch mit Firebug und Co. nur schwer herausfinden, da man mit solchen Seiteneffekten kaum rechnet. Man macht sich hier zu nutze, wie die Browser die Border-Eigenschaft von CSS umsetzen.<\/p>\n

Testbox<\/span><\/p>\n

Man sieht im Beispiel, wie an den Farb\u00fcberg\u00e4ngen des Rahmens Querlinien entstehen. Betrachten wir den roten Teil des Rahmens: Machen wir den gr\u00fcnen und blauen Teil transparent, erhalten wir ein aufgestelltes, rotes Trapez.<\/p>\n

Testbox<\/span><\/p>\n

Entfernen wir dann den Text und reduzieren die H\u00f6he auf ein Minimum, wird dieses Trapez dann zum Dreieck:<\/p>\n

 <\/div>\n

Nur der linke Rahmen hat nun eine Farbe, in der Folge entsteht ein Dreieck, welches nach rechts zeigt.<\/p>\n

Ich habe folgende CSS-Klassen entworfen, mit der man Pfeile nach oben, unten, links und rechts mittels class=\"arrow up\"<\/code>, class=\"arrow down\"<\/code> usw. setzen kann. Man kann das ganze nat\u00fcrlich anders, vermutlich auch k\u00fcrzer realisieren. Mir ging es aber darum, die relevanten Einstellungen Pfeilfarbe (= border-color<\/code>) und Gr\u00f6\u00dfe (= border-width<\/code>) nur einmal vornehmen zu m\u00fcssen. So muss man f\u00fcr eine kleine \u00c4nderung nicht erst 20 Zeilen Code durchsuchen.<\/p>\n

<!DOCTYPE html>\n<html lang=\"en\">\n\n<meta charset=\"utf-8\">\n<title>CSS Arrows<\/title>\n\n<style type=\"text\/css\">\n.arrow {\n\tborder: 5px solid #444;\n\tfont-size:0;line-height:0;height:0;padding:0;margin:0;\n}\n.arrow.down {\n\tborder-right-color:  transparent;\n\tborder-bottom-color: transparent;\n\tborder-left-color:   transparent;\n}\n.arrow.up {\n\tborder-top-color:    transparent;\n\tborder-right-color:  transparent;\n\tborder-left-color:   transparent;\n}\n.arrow.left {\n\tborder-top-color:    transparent;\n\tborder-bottom-color: transparent;\n\tborder-left-color:   transparent;\n}\n.arrow.right {\n\tborder-top-color:    transparent;\n\tborder-right-color:  transparent;\n\tborder-bottom-color: transparent;\n}\n<\/style>\n\n<p><span class=\"arrow down\"><\/span><\/p>\n<p><span class=\"arrow up\"><\/span><\/p>\n<p><span class=\"arrow left\"><\/span><\/p>\n<p><span class=\"arrow right\"><\/span><\/p>\n\n<\/html>\n<\/pre>\n
Sch\u00f6ne, neue HTML-5-Welt: Kein Head, kein Body, alles valide.<\/p>\n
Im Browser sollte das ganze dann in etwa so aussehen:<\/p>\n
\"\"<\/a><\/p>\n
Vielen dank an Denis Potschien, der mich mit seinem T3N-Artikel \u201eCSS3: Individuelle Tooltips ohne JavaScript<\/a>\u201c auf diese Idee gebracht hat.<\/p>\n","protected":false},"excerpt":{"rendered":"
Eigentlich gibt es in HTML genug M\u00f6glichkeiten, einen Pfeil zu realisieren. Der &darr;\u00a0(\u2193) sollte in allen relevanten Browsern als solcher angezeigt werden. Dennoch wird er kaum genutzt. Vielleicht auch einfach deshalb, weil er nach dem momentanen Empfinden der meisten Webdesigner doch etwas altbacken aussieht. Es gibt aber auch eine M\u00f6glichkeit, mit CSS einen einfachen Pfeil in Dreiecksform umzusetzen, der sich vielleicht besser in moderne Designs einf\u00fcgt.<\/p>\n","protected":false},"author":1,"featured_media":913,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,91],"tags":[285,38],"_links":{"self":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/912"}],"collection":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/comments?post=912"}],"version-history":[{"count":22,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/912\/revisions"}],"predecessor-version":[{"id":2952,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/912\/revisions\/2952"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/media\/913"}],"wp:attachment":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/media?parent=912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/categories?post=912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/tags?post=912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}