How can I make a triangle in HTML?

Question

I want to use basic CSS to make triangle in an HTML page. I am using triangle pics which take time to load, so, I want to decrease loading time of my page.

Answer 1

Not possible 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 defines the size: width and height. You can change it if you want a smaller or a bigger 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 on how to create CSS triangles: http://www.uselesspickles.com/triangles/

By creating divs without width or height, the borders end up creating a triangle when you leave some of the borders as transparent.

Credit That page was written by a co-worker, way before other people figured out 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