原文地址:https://www.cnblogs.com/monozxy/articles/7903019.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.sanjiao_border:before,
.sanjiao_border .before {
/*.before为ie6下用到*/
content: '';
/*伪类下的属性*/
display: block;
position: absolute;
top: 0px;
left: 150px;
width: 0;
height: 0;
overflow: hidden;
font-size: 0;
/*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
line-height: 0;
/* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
border: 10px;
border-style: dashed dashed solid dashed;
border-color: transparent transparent #f30 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 dashed solid dashed;
border-color: transparent transparent #fff transparent;
position: absolute;
left: 151px;
top: 2px;
}
</style>
</head>
<div class="box sanjiao_border">
<!--ie6下需用,非ie6无需-->
<i class="before"></i>
<i class="after"></i>
</div>
<body>
</body>
</html>