Posted By

michellebracken on 08/18/11


Versions (?)

CSS Triangles and Other Shapes

 / Published in: CSS

CSS borders come together at an angle at any corner. This isn’t obvious when setting a border that’s the same color on all sides or if your border-width is only a few px. Making the width much larger and setting different border-colors on different sides lets you see this clearly. Taking advantage of these angles we can use the border-property to create some interesting shapes. Creating a triangle is a matter of setting the border-color on 3 of the 4 sides to transparent. You also want to set the width and height of the element to be 0 in order for all 4 corners to meet at a point. You can set the border opposite the triangle to 0 as well, but the adjacent borders need to maintain a width or the entire element with borders will collapse to a single point. With a little experimentation you can create moe interesting shapes, especially if you combine several elements.

  1. 1 .triangle {
  2. 2 border-color: transparent transparent green transparent;
  3. 3 border-style: solid;
  4. 4 border-width: 0px 300px 300px 300px;
  5. 5 height: 0px;
  6. 6 width: 0px;
  7. 7 }

Report this snippet  

You need to login to post a comment.