Understand how to create triangles with CSS

I’ve been creating css shapes for a while now, but just recently I’ve been starting to wonder how does the technique actually work and why.

You can find a good collection of css snipets here. Most shapes use css 3 properties but there are a few useful ones that do not require css 3 so you don’t have to worry about browser compatibility.

How to create a triangle with css

#right-triangle {
   width: 0;
   height: 0;
   border-left: 60px solid red;
   border-top: 30px solid transparent;
   border-bottom: 30px solid transparent;
}

Read more