Create a triangle with CSS ONLY!
Update
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
.borders{
border-color: transparent green transparent transparent;
border-style:solid;
border-width: 15px;
width: 0;
height: 0
}
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!
So, out of curiosity, why exactly did you use images in your post to show how to create a triangle with CSS only?
Great question! I used images because it is a quick way to show the results, instead of added bytes to my style sheet that is not a necessity to make my site work. I have included the code that you can use to create the same look but in CSS. It gives you the opportunity to experiment with the code. Trust me try it, it works!
Thanks
So, out of curiosity, why exactly did you use images in your post to show how to create a triangle with CSS only?
Great question! I used images because it is a quick way to show the results, instead of added bytes to my style sheet that is not a necessity to make my site work. I have included the code that you can use to create the same look but in CSS. It gives you the opportunity to experiment with the code. Trust me try it, it works!
Thanks
Ry – you are freakin’ smart, you know that?