Create a triangle with CSS ONLY!
April 7, 2014
So some people asked why did i use images instead of actually code. Here it is, Use Firebug, Google Chrome, or what ever developer tool you use and copy and paste for your needs.
So the question I asked myself was, “How can I use this to my advantage?”. I found that I could create arrows without images. Below is example of what any arrow would look like with CSS.
Here is the code that creates this effect
border-color: transparent green transparent transparent;
Just remember when using four values in a single property, like in the border-color property, the first value is the bottom and then clock wise from that point.
I have tested the css property in all major browsers, and seems to work great!