带阴影的三角形与带边框的三角形

带阴影的三角形

思路：旋转三角形，添加阴影

&::before{
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: -6px;
        left: 42px;
        border-style: solid;
        border-width: 6px;
        border-color: transparent transparent #fff #fff; /* 形成一个直角三角形 */
        -webkit-transform: rotate(135deg); /*旋转角度是靠你要箭头方向决定的*/
        transform: rotate(135deg);
        box-shadow: -2px 3px 4px 0 #f1f1f1; /* 添加阴影 */
  }

带边框的三角形

大概思路：边框的颜色作为底色，上面覆盖三角形的颜色，定位好下面的就是边框了

<span class="arrow"></span>

/*边框的颜色作为底色，上面覆盖三角形的颜色，定位好下面的就是边框了*/
.arrow{
width:0;
height:0;
border-style: solid;
border-width: 10px;
border-color: transparent transparent #e0e0e0 transparent;
position:relative;

}
.arrot:before{
position: absolute;
width:0;
height:0;
border-width:8px;
border-style: solid;
border-color: transparent transparent #fff transparent;
top:2px;
left:2px;
}