参考链接：https://www.cnblogs.com/monozxy/p/7903019.html

带有边框的三角形如何实现呢

这种就相当于两个绝对定位的无边框三角形叠加在一起

为了代码简洁在非ie6下采用:before和after伪类，ie6下用样式名来实现，代码

1.dom元素

<div class="box sanjiao_border">
	<!--ie6下需用，非ie6无需-->
	<i class="before"></i><i class="after"></i>
</div>

2.css代码

/*制作向左的箭头*/
.sanjiao_border{
	width: 400px;
	height: 400px;
	border: 1px solid red;
	margin: 100px auto;
	position: relative;
}

.sanjiao_border:before,.sanjiao_border .before{/*.before为ie6下用到*/
    content: ''; /*伪类下的属性*/
    display:block;
    position:absolute;
    top:10px;
    left:-20px;
    width:0;
    height:0;
    overflow:hidden;
    font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
    line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    border:10px;
    border-style:dashed solid dashed  dashed;
    border-color:transparent #f30 transparent  transparent;
}
.sanjiao_border:after,.sanjiao_border .after{/*.after为ie6下用到*/
    content: '';/*伪类下的属性*/
    display:block;
    width:0;
    height:0;
    overflow:hidden;
    font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
    line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    border:9px;
    border-style:dashed solid dashed  dashed;
    border-color:transparent #fff transparent  transparent;
    position:absolute;
    left:-18px;
    top:11px;
}