Categories
css css-shapes geometry polygon

How do CSS triangles work?

1974

There’re plenty of different CSS shapes over at CSS Tricks – Shapes of CSS and I’m particularly puzzled with a triangle:

CSS Triangle

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
<div id="triangle-up"></div>

How and why does it work?

9

  • 64

    You can: jsfiddle.net/wbZet

    – mskfisher

    Aug 16, 2011 at 12:40

  • 59

    How about the square that’s not there? jsfiddle.net/minitech/sZgaa

    – Ry-

    Aug 16, 2011 at 16:31

  • 1

    @mskfisher The size of the bottom border in your equilateral triangle shouldn’t be ceil(sqrt(3) * 60) ? A few pixels more then!

    – Niloct

    Aug 17, 2011 at 12:22


  • 1

    @Niloct: I eyeballed it quickly at round numbers. You’re right, the more accurate equilateral measurements would be (side:58,bottom: 100) or (side:60,bottom:104).

    – mskfisher

    Aug 17, 2011 at 12:41

  • 1

    Here’s a great CSS triangle generator for every directions and sizes: apps.eky.hk/css-triangle-generator

    Mar 7, 2014 at 23:40

2341

CSS Triangles: A Tragedy in Five Acts

As alex said, borders of equal width butt up against each other at 45 degree angles:

borders meet at 45 degree angles, content in middle

When you have no top border, it looks like this:

no top border

Then you give it a width of 0…

no width

…and a height of 0…

no height either

…and finally, you make the two side borders transparent:

transparent side borders

That results in a triangle.

8

  • 10

    @Jauzsika, you can add these triangles into a page without adding additional elements simply by using :before or :after pseudo classes.

    – zzzzBov

    Aug 16, 2011 at 13:24

  • 116

    Act with animations: jsfiddle.net/pimvdb/mA4Cu/104. Just for those of us who need even more visual proof like me…

    – pimvdb

    Aug 18, 2011 at 20:26

  • With different left-border and right-border, non-isosceles triangle can be made. And when many triangles are combined… jsfiddle.net/zRNgz

    – JiminP

    Aug 26, 2011 at 2:47

  • 3

    In 2018, is there a better way to make a triangle with CSS rather than using this hack?

    Mar 8, 2018 at 14:36

  • 1

    @Scribblemacher Inline SVG would do it.

    – GKFX

    Mar 24, 2018 at 14:39

550

The borders use an angled edge where they intersect (45° angle with equal width borders, but changing the border widths can skew the angle).

Border example

div {
  width: 60px;
  border-width: 30px;
  border-color: red blue green yellow;
  border-style: solid;
}
<div></div>

Have a look to the jsFiddle.

By hiding certain borders, you can get the triangle effect (as you can see above by making the different portions different colours). transparent is often used as an edge colour to achieve the triangle shape.

0

    520

    Start with a basic square and borders. Each border will be given a different color so we can tell them apart:

    .triangle {
        border-color: yellow blue red green;
        border-style: solid;
        border-width: 200px 200px 200px 200px;
        height: 0px;
        width: 0px;
    }
    <div class="triangle"></div>

    which gives you this:

    square with four borders

    But there’s no need for the top border, so set its width to 0px. Now our border-bottom of 200px will make our triangle 200px tall.

    .triangle {
        border-color: yellow blue red green;
        border-style: solid;
        border-width: 0px 200px 200px 200px;
        height: 0px;
        width: 0px;
    }
    <div class="triangle"></div>

    and we will get this:

    bottom half of square with four borders

    Then to hide the two side triangles, set the border-color to transparent. Since the top-border has been effectively deleted, we can set the border-top-color to transparent as well.

    .triangle {
        border-color: transparent transparent red transparent;
        border-style: solid;
        border-width: 0px 200px 200px 200px;
        height: 0px;
        width: 0px;
    }
    <div class="triangle"></div>

    finally we get this:

    triangular bottom border

    7

    • 21

      Cool, but isn’t this the same way? 🙂

      Aug 17, 2011 at 11:33

    • 5

      There's another way to draw .., which turns out to be the same way 🙂 Nice explanation though

      Aug 17, 2011 at 19:21

    • 17

      -1 for using JPEGs with massive artifacts. But +1 for creating a great example of when not to use JPEGs that I can link to in the future for deterrance. 😉

      Aug 18, 2011 at 8:24

    • 4

      why isn’t a gif used instead here?

      – prusswan

      Dec 7, 2011 at 8:37

    • 4

      Sorry @hheimbuerger, I messed up your example by fixing the images. You’ll have to link to revision 2 of this answer in the future.

      Aug 15, 2012 at 20:05