1、普通三角形

/**
 * 箭头指向的反方向的颜色设置为你想要的，然后箭头方向不要写，另外两个方向的颜色设置为transperent透明
 * 可以通过改变上下左右4个方向上的boderwidth来实现等腰 等边 和其他三角形
 */
.triangle {
    border-style: solid;
    border-width: 10px;
    border-color: transparent transparent #f60 transparent;
}

效果：

2、带边框的三角形

/**
 * 带边框的三角形其实是通过两个三角形叠加形成的
 */
 .triangle {
     display:block;
     width:0;
     height:0;
     border-width:10px;
     border-style:solid;
     border-color:transparent #f60 transparent transparent;
     position:absolute;
     top:8px;
     left:-20px;
 }
 .triangle :after{
     content: '';
     display:block;
     width:0;
     height:0;
     border-width: 10px;
     border-style:solid;
     border-color:transparent #fff transparent transparent;
     position:absolute;
     top:-10px;
     left:-9px;
 }
 

效果：

3、带阴影的三角形

/**
 * 带阴影的三角形通过在一个模糊的三角形上叠加一个正常的三角形实现
 */
 .triangle {
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-bottom: 10px solid #f60;
     position: absolute;
     top: -10px;
     left: 50%;
     margin-left: -10px;
 }
 .triangle:after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-bottom: 10px solid #000;
     position: absolute;
     margin-left: -10px;
     z-index: -1;
     filter: blur(2px);
 }

效果：