Create a triangle with CSS ONLY!

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!


5 responses to “Create a triangle with CSS ONLY!”

  1. De_freaking_coder says:

    So, out of curiosity, why exactly did you use images in your post to show how to create a triangle with CSS only?

    • Ryan Wagner says:

      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

  2. De_freaking_coder says:

    So, out of curiosity, why exactly did you use images in your post to show how to create a triangle with CSS only?

    • Ryan Wagner says:

      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

  3. Jay Daugherty says:

    Ry – you are freakin’ smart, you know that?

Leave a Reply

Your email address will not be published. Required fields are marked *

*