Playing With CSS3 Triangles

Playing With CSS3 Triangles

1:43 PM

Triangles and Stars

I have previously done squares and circles with CSS and now I want to show you some triangles. I love using CSS for shapes and designs because the pages load way faster.
Let's make some CSS triangles!

Triangle CSS

?
1
2
3
4
5
6
7
#up-triangle {
   width: 0;
   height: 0;
   border-bottom: 120px solid green;
   border-left: 60px solid transparent;
   border-right: 60px solid transparent;
}
Now, let's twist it left...
?
1
2
3
4
5
6
7
#left-triangle {
   width: 0;
   height: 0;
   border-right: 100px solid orange;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}
And back to the right...
?
1
2
3
4
5
6
7
#right-triangle {
   width: 0;
   height: 0;
   border-left: 100px solid red;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}
And now, upside down.
?
1
2
3
4
5
6
7
#down-triangle {
   width: 0;
   height: 0;
   border-top: 80px solid pink;
   border-left: 60px solid transparent;
   border-right: 60px solid transparent;
}

Next
« Prev Post
Previous
Next Post »
Thanks for your comment
Subscribe to: Post Comments (Atom)