Wednesday, January 7, 2015

How to make triangles or arrows using css border width


h2.entry-title { position: relative; }
h2.entry-title:after { content: ""; border-width: 15px; position: absolute; left: 179px; top: -4px; border-style: solid; border-left-width: 0; border-right: 15px solid green; border-left: 15px solid yellow; }

with all borders



h2.left-triangle:after { border:15px solid transparent; border-right: 15px solid green; }

left triangle



h2.right-triangle:after { border:15px solid transparent; border-left: 15px solid green; }

right triangle



h2.top-triangle:after { border:15px solid transparent; border-bottom: 15px solid green; }

top triangle



h2.down-triangle:after { border:15px solid transparent; border-top: 15px solid green; }

down triangle