How can I create a triangle in HTML?

Question

I want to use basic CSS to create a triangle on an HTML page. I use triangle pics, which take a while to load, so I want to reduce the loading time of my page.

Answer 1

Impossible with HTML, but with CSS. Example:

<div class="triangle></div> 

 .triangle { width: 0; height: 0; border: solid 30px; border-color: transparent transparent black transparent; } 

Live demo: jsFiddle

• 30px in the border property determines the size: width and height. You can change it if you want a smaller or larger triangle.
• if you want to rotate the triangle, switch the position of black and transparent in the border-color property. See jsFiddle

Answer 2

This is the best explanation of how to create CSS triangles: http://www.uselesspickles.com/triangles/

By creating divs without width or height, borders create a triangle when you leave some borders transparent.

Credit This page was written by an employee before other people understood this trick.

 #tri { width: 0; height: 0; border-top-width: 20px; border-top-style: solid; border-top-color: transparent; border-right-width: 20px; border-right-style: solid; border-right-color: red; } 

 <div id="tri"></div> 

jsFiddle demo

Answer 3

Css triangle creation trick

• Create an empty div
• Make its height and width 0.
• Give 2 opposite sides of the same border width and make them transparent.
• Give the third one the width of the border, give it a solid color.

Hope this helps.

Check jsFiddle