<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>无标题文档</title>
<style>
.border{
position:relative
}
.border:after,.border:before{
content:''
display:block
position:absolute
border-style:solid
border-width:20px
}
.border:before{
border-color:transparent transparent #333 transparent
left:20px
top:42px
}
.border:after{
border-color:transparent transparent #fff transparent
left:20px
top:45px
}
</style>
</head>
<body>
<div class="border"></div>
</body>
</html>
你自己把他定位上去，并覆盖在上面。
可以通过设置一下边框宽度来解决不能重合的问题。像这样的带边框div的一定要计算很精准：
总宽度＝div宽度+左边框宽度+右边框宽度（只要有边框的div都要计算边框的宽度）
上图中CSS并没有指定边框是多宽的，建议也指定定义好的宽度数值，再计算一下整体宽度是多少，这样应该就可以将边框重合了。
如果还不能重合，建议将完整代码截图发来。
用绝对定位，符负值；.tab {
border:4px solid #666
width:100px
height:100px
position:relative
}
.tab2 {
position:absolute
left:-4px
top:-4px
border:4px solid #00F
width:60px
height:60px
}
<div class="tab">
<div class="tab2" id="tab"></div>
</div>
