CSS Triangles

css-triangles

div {
    position:relative; /* Position must be relative to absolutely position :after */
    background:#333; /* Background color to show effect */
}

div:after{
    content:''; /* Required to display content */
    position: absolute; /* Sets the position absolute to the top div */
    top: 0; 
    left: 50%;
    margin-left: -50px; /* Set margin equal to border px */
    width: 0;
    z-index:1;
    height: 0;
    border-top: solid 50px #fff; /* Creates the notch */
    border-left: solid 50px transparent; /* Creates triangle effect */
    border-right: solid 50px transparent; /* Creates triangle effect */
}