CSS Triangle

HTML markup

<div class="triangle-top-left"></div>
<div class="triangle-top-right"></div>
<div class="triangle-bottom-left"></div>
<div class="triangle-bottom-right"></div>

CSS

.triangle-top-left{
     width: 0;
     height: 0;
     border-right: 50px solid transparent;
     border-top: 50px solid #117300;
     border-left: 50px solid #117300;
     border-bottom: 50px solid transparent;
}
.triangle-top-right{
     width: 0;
     height: 0;
     border-right: 50px solid #006699;
     border-top: 50px solid #006699;
     border-left: 50px solid transparent;
     border-bottom: 50px solid transparent;
}
.triangle-bottom-left{
     width: 0;
     height: 0;
     border-right: 50px solid transparent;
     border-top: 50px solid transparent;
     border-left: 50px solid #117300;
     border-bottom: 50px solid #117300;
}
.triangle-bottom-right{
     width: 0;
     height: 0;
     border-right: 50px solid #006699;
     border-top: 50px solid transparent;
     border-left: 50px solid transparent;
     border-bottom: 50px solid #006699;
}

Demo »


Go Daddy


Related articles

Vecteezy - Free Vector Art

Vecteezy - Free Vector Art

05/08/2016

If you need Free Vector Art do not hesitate: visit Vecteezy.com

Free vector icons

Free vector icons

31/01/2016

Want to have some vector icons, free? Try this nice website.

Beautiful free stock photos from StockSnap

Beautiful free stock photos from StockSnap

11/12/2015

Would you like some cool stock photos for free? Check out this article, and try this website.


Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the baby *


Find us on Facebook

Tags

Get online with the world's Best - GoDaddy.com!

Back to Top