Line with Down Arrow

HTML

<div class='bottom-line'>content</div>


<div class="triangle">Triangle</div>

CSS

.bottom-line{
    border-bottom:1px solid #999;
}

.bottom-line:after{
    content:"";
    display:block;
    margin-bottom:-8px;
    border-right:1px solid #999;
    border-bottom:1px solid #999;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);   
    width:12px;
    height:12px;
    background-color:#fff;
    z-index:200px;
    margin-left:100px;
}
/*-------Another Method to Make a Line------*/

.triangle {
  position: relative;
  border-bottom: 1px solid #aaa;
}
.triangle:before,
.triangle:after {
  content: "";
  position: absolute;
  bottom: -15px; /* value = - border-top-width - border-bottom-width */
  left: 30px;
  border-width: 15px 15px 0; /* vary these values to change the angle of the vertex */
  border-style: solid;
  border-color: #aaa transparent;
}

.triangle:after {
  bottom: -14px; /* -1px of first element for border */
  border-color: #fff transparent;
}