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

This will make a triangle

<svg width="100" height="100">
    <polygon points="50, 50, 100, 100, 0, 100" fill="yellow" />
</svg>

Answer 2

The trick behind making a css triangle is

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

Hope this helps.

Check this jsFiddle

Answer 3

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 4

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