triangles.css

/* TRIANGLE */
.triangle {
    width:          0;
    height:         0;
    border-width:   10px;
    border-style:   solid;
    border-color:   transparent;
    font-size:      0;
}

.triangle-tl {
    border-top-width:       0 !important;
    border-right-width:     0 !important;
    border-bottom-color:    transparent !important;
}
.triangle-tr {
    border-top-width:       0 !important;
    border-left-width:      0 !important;
    border-bottom-color:    transparent !important;
}
.triangle-bl {
    border-bottom-width:    0 !important;
    border-right-width:     0 !important;
    border-top-color:       transparent !important;
}
.triangle-br {
    border-bottom-width:    0 !important;
    border-left-width:      0 !important;
    border-top-color:       transparent !important;
}

.triangle-l {
    border-left-width:      0 !important;
    border-top-color:       transparent !important;
    border-bottom-color:    transparent !important;
}

.triangle-r {
    border-right-width:      0 !important;
    border-top-color:       transparent !important;
    border-bottom-color:    transparent !important;
}

.triangle-t {
    border-top-width:       0 !important;
    border-left-color:      transparent !important;
    border-right-color:     transparent !important;
}

.triangle-b {
    border-bottom-width:    0 !important;
    border-left-color:      transparent !important;
    border-right-color:     transparent !important;
}