CODEWITHSUNDEEP
htmlcsscss-shapes
Ali
Ali

Reputation: 281

How can I make a triangle in HTML?

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.

Upvotes: 13

Views: 42739

Answers (4)

Jak
Jak

Reputation: 172

This will make a triangle

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

Upvotes: 8

Ruan Mendes
Ruan Mendes

Reputation: 92324

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

Upvotes: 24

Nikola K.
Nikola K.

Reputation: 7155

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

Upvotes: 35

mtk
mtk

Reputation: 13717

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

Upvotes: 3

Related Questions