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 { 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