Css Arrow with dashed border

HTML

<ul class="timeline">
            <!-- BEGIN CENTERING LINE -->
            <li class="centering-line"></li>
            <!-- END CENTERING LINE -->



              </div><!-- /.inner-content -->
            </li>
            <!-- END ITEM TIMELINE -->




            <!-- END HIGHLIGHT TIMELINE MOMENT -->
          </ul>

CSS

ul.timeline {
  position: relative;
  padding: 0;
  margin: 0;
  list-style: none;
  li.centering-line {
    position: absolute;
    width: 4px;
    background: rgba(1,1,1,.2);
    left: 50%;
    margin-left: -2px;
    top: 0;
    bottom: 0;
    z-index: 1;
  }
}

ul.timeline li:nth-child(even).item-timeline {
  float: left;
  clear: left;
}
ul.timeline li.item-timeline {
  display: inline-block;
  width: 50%;
  position: relative;
  z-index: 2;
}



ul.timeline li.item-timeline:nth-child(even):before {
  position: absolute;
  top: 37px;
  right: 15px;
  display: inline-block;
  border-top: 1px dashed #b3b3b3;
  border-right: 1px dashed #b3b3b3;
    width:10px;
    height:10px;
    transform:rotate(45deg);
    background:white;
    z-index:1;
  
  content: '';
}

ul.timeline li.item-timeline:nth-child(odd):before {
  position: absolute;
  top: 50px;
  left: 8px;
  display: inline-block;
  border-top: 12px solid transparent;
  border-right: 12px solid #fff;
  border-bottom: 12px solid transparent;
  border-right-color: #808080;
  content: '';
}



ul.timeline li:nth-child(even).item-timeline .buletan {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  right: -6px;
  top: 35px;
  border: 2px solid #1BBC9B;
}

ul.timeline li:nth-child(odd).item-timeline .buletan {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  left: -6px;
  top: 55px;
  border: 2px solid #1BBC9B;
}



ul.timeline li.item-timeline .inner-content {
  margin: 20px;
  background: transparent;
  padding: 10px;
  border: 1px dashed #b3b3b3;
  border-radius: 8px;
  display: block;
  font-size: 15px;
  position: relative;
}

ul.timeline li.item-timeline .heading-timeline {
padding: 15px 0;
margin: -10px 0 10px 0;
border-bottom: 1px solid #eee;
position: relative;
height: 60px;
}

ul.timeline li.item-timeline .heading-timeline .avatar {
position: absolute;
left: 0;
top: 20px;
width: 40px;
height:...