Edit in JSFiddle

<div class="top_left_triangle"></div>
<div class="top_right_triangle"></div>
<div class="bottom_left_triangle"></div>
<div class="bottom_right_triangle"></div>

.top_right_triangle, .top_left_triangle, .bottom_left_triangle, .bottom_right_triangle {
    display: block;
    width: 0px;
    height: 0px;
    margin: 10px; /* Purely Presentational */
    float: left; /* Purely Presentational */
}

.top_left_triangle, .bottom_right_triangle {
    border-right: 20px solid transparent;
    border-top: 20px solid transparent;   
}

.top_left_triangle { border-top-color: black; }
.bottom_right_triangle { border-right-color: black; }

.top_right_triangle, .bottom_left_triangle {
    border-bottom: 20px solid transparent;
    border-right: 20px solid transparent;
}
.top_right_triangle { border-right-color: black; }
.bottom_left_triangle { border-bottom-color: black; }