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.

To understand how this shape works and for alternative solutions please see http://stackoverflow.com/q/7073484/1811992 — web-tiki, Nov 21 '14 at 11:53

Nikola K. · Answer 1 · 2013-06-13T23:48:55.437

35

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

edited Jun 13 '13 at 23:48

answered Sep 18 '12 at 18:58

Nikola K.

7,093
13
31
39

7

Note that by leaving two borders on, you get right triangles instead, which allow you to generate any triangle you need. See my answer and http://jsfiddle.net/GR4Kj/5/ http://www.uselesspickles.com/triangles/ – Ruan Mendes Sep 18 '12 at 19:23

Ruan Mendes · Answer 2 · 2016-09-19T18:54:44.947

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

score 8 · Answer 3 · edited Jan 14 '22 at 13:30

8

This will make a triangle

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

edited Jan 14 '22 at 13:30

Didier L

18,905
10
61
103

answered Jun 27 '18 at 14:59

Jak

162
2
11

score 3 · Answer 4 · edited Sep 18 '12 at 20:03

3

The trick behind making a css triangle is

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

Hope this helps.

Check this jsFiddle

edited Sep 18 '12 at 20:03

Ruan Mendes

90,375
31
153
217

answered Sep 18 '12 at 19:00

mtk

13,221
16
72
112

Doesn't work. Unless you missed a step in your explanation. [JSFiddle](http://jsfiddle.net/mUaq4/). – Roddy of the Frozen Peas Sep 18 '12 at 19:04
Thanks updated !!! Please update if you can explain it or have some other idea/trick for the same. – mtk Sep 18 '12 at 19:12

How can I make a triangle in HTML?

4 Answers4

Linked