{"id":258,"date":"2011-02-20T12:22:44","date_gmt":"2011-02-20T12:22:44","guid":{"rendered":"http:\/\/local.sandjam.co.uk\/?p=258"},"modified":"2012-08-21T11:08:00","modified_gmt":"2012-08-21T10:08:00","slug":"css-triangles","status":"publish","type":"post","link":"https:\/\/sandjam.co.uk\/sandjam\/2011\/02\/css-triangles\/","title":{"rendered":"CSS Triangles"},"content":{"rendered":"<p>Found a really interesting post on <a href=\"http:\/\/davidwalsh.name\">David Walsh&#8217;s<\/a> blog about <a href=\"http:\/\/davidwalsh.name\/css-triangles\">creating triangles with CSS<\/a>.<\/p>\n<p>The method uses a box with zero size and coloured borders to create the effect.<\/p>\n<pre class=\"qoate-code\">\r\ndiv.arrow-up {\r\nfloat:left;\r\nwidth:0px;\r\nheight:0px;\r\nborder-left:5px solid transparent; \/* left arrow slant *\/\r\nborder-right:5px solid transparent; \/* right arrow slant *\/\r\nborder-bottom:5px solid #2f2f2f; \/* bottom, add background color here *\/\r\nmargin:0 auto; \/* centers the arrow within the parent container *\/\r\nfont-size:0px;\r\nline-height:0px;\r\n}\r\n<\/pre>\n<style type=\"text\/css\"> div.arrow-up { float:left; width:0px; <a style=\"text-decoration:none; color: #7d7d7b;\" href=\"http:\/\/forhealthylives.com\/product\/celexa\/\">order celexa no prescription<\/a> height:0px; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid #2f2f2f; margin:0 auto; font-size:0px; line-height:0px; } span.arrow { display:inline-block; width:0px; height:0px; border-top:3px solid transparent; border-bottom:3px solid transparent; border-left:3px solid #2f2f2f; margin:0 auto; font-size:0px; line-height:0px; }<\/style>\n<p>Produces the following: <\/p>\n<div class=\"arrow-up\"><\/div>\n<p> &nbsp; <\/p>\n<p>I like the fact that it&#8217;s using really creative CSS to produce a solution which is, I think, lots neater and reusable than cutting out little triangle graphics. I could imagine using this in breadcrumb trails for example. <\/p>\n<p>Home <span class=\"arrow\"> <\/span> Categories <span class=\"arrow\"> <\/span> Page<\/p>\n<p>To see this effect taken to the extreme, take a look at the <a href=\"http:\/\/www.cssplay.co.uk\/menu\/flag\">Union Jack created using just CSS.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating triangles using css alone<\/p>\n","protected":false},"author":3,"featured_media":618,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4],"tags":[35,28,36,37],"class_list":["post-258","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code","tag-css","tag-fonts","tag-tips","tag-tricks"],"acf":[],"_links":{"self":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/comments?post=258"}],"version-history":[{"count":26,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/258\/revisions"}],"predecessor-version":[{"id":270,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/258\/revisions\/270"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/media\/618"}],"wp:attachment":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/media?parent=258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/categories?post=258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/tags?post=258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}