css制作三角形和圆|实心+空心

• 左箭头
  

.triangle_left{
    position: relative;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-right: 25px solid #000;
    border-bottom: 25px solid transparent;
}
 .triangle_left:after{
    content: '';
    position: absolute;
    border-top: 25px solid transparent;
    border-right: 25px solid #fff;
    border-bottom: 25px solid transparent;
    left: 5px;
    top: -25px;
}

<div class="triangle_left" >div>

• 右箭头

 .triangle_right{
    position: relative;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid #000;
}
.triangle_right:after{
    content: '';
    position: absolute;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid #fff;
    left: -30px;
    top: -25px;
}

<div class="triangle_right" >div>