Knowledgebase

This post describes in 3 examples, how you can create a triangle with pure CSS and HTML.

HTML
<br />
Example 1
<br />
<br />
<div class="example1"></div>

<br />
Example 2
<br />
<br />
<div class="example2"></div>

<br />
Example 3
<br />
<br />
<div class="example3"></div>

CSS
.example1 {
    height: 40px;
    width: 40px;
    border-left: 10px solid blue;
    border-right: 10px solid blue;
    border-bottom: 10px solid #000000;
    border-top: 10px solid #000000;
}

.example2 {
    height: 20px;
    width: 20px;
    border-left: 10px solid blue;
    border-right: 10px solid blue;
    border-bottom: 10px solid #000000;
    border-top: 10px solid #000000;
}

.example3 {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #2f2f2f;
}