CSS triangle

Making a triangle with CSS is a great skill to have available to you, as it gives you one more way to call attention to an element on the screen. And let's face it, So let's take a look at how to get it done. Creating triangle with pure CSS can be a fun and exploratory process. Creating CSS triangles falls into that group as well. Even though that support for pure CSS triangles goes back to IE7, It's only with the introduction of CSS3 that we can really let it shine. In this tutorial I will give a basic overview of how to create pure CSS triangles as well as how to create a complex CSS3 button that involves triangles.

HTML

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

CSS

.arrow-up {
    width: 0;
    height: 0;
    border-width: 50px;
    border-color: transparent transparent green transparent;
    border-style: solid;
}
.arrow-down {
    width: 0;
    height: 0;
    border-width: 50px;
    border-color: green transparent transparent transparent;
    border-style: solid;
}
.arrow-right {
    width: 0;
    height: 0;
    border-width: 50px;
    border-color: transparent transparent transparent yellow;
    border-style: solid;
}
.arrow-left {
    width: 0;
    height: 0;
    border-width: 50px;
    border-color: transparent red transparent transparent;
    border-style: solid;
}