5 ms·

Can someone explain the triangles? I see what their doing, but why does it make the triangle shape? Shouldn't it just render as a square with different sized r

• mnutt 15y ago
  It's because width and height are set to zero. And since the browser tapers the edge of the borders, you get a triangle shape.
• Timothee 15y ago
  Here's a modified version of it: https://skitch.com/timothee/fxnjf/the-shapes-of-css https://skitch.com/timothee/fxnjf/the-shapes-of-css Basically, the triangle is made of only the bottom border. The top border is of width 0px so doesn't show. The element itself is 0x0px so doesn't show either. The right and left borders are transparent so you don't see them, but their width of 50px gives the base of the triangle. (which is then 100px) Finally the bottom border is 100px wide which gives the height of the triangle. Note that the trapezoid further down is the same thing with a width of 100px for the element itself, as if you stretched that triangle in the middle.
  • lean 15y ago
    It totally clicked when I saw your example, thanks!