Edit in JSFiddle

<div class="up_triangle"></div>
<div class="down_triangle"></div>
<div class="right_triangle"></div>
<div class="left_triangle"></div>

.left_triangle, .right_triangle, .up_triangle, .down_triangle {
    display: block;
    width: 0px;
    height: 0px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    margin: 10px; /* Purely Presentational */
    float: left; /* Purely Presentational */
}
.left_triangle {
    border-right-color: black;
    border-left: none;
}
.right_triangle {
    border-left-color: black;
    border-right: none;
}
.up_triangle {
    border-bottom-color: black;
    border-top: none;
}
.down_triangle {
    border-top-color: black;
    border-bottom: none;
}