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

Barchart using css and angularjs

Recently, I came across situation like generating a dynamic graph shown in screen-shot below. I have searched a lot for any javascript api to generate graph/chart like google chart, chartJs etc. But failed. Later decided to develop it with myself using css and angularJs, here is the github code, fork it and contribute :) happy coding!!  ( https://github.com/munawer-t/bar-chart-using-pure-css3-and-angularjs )