利用before和after设置两个相同的三角,并通过设置一个为白色一个为黑色,将白色设置在黑色之上,并让白色三角向右移1px,便可出现1px 的三角边框。
实例代码:可复制进html中直接执行
<style>
.test-sal {
position: relative;
margin: 0 0 0 20px;
width: 100px;
height: 100px;
border: 1px solid #000;
}
.test-sal:before {
content: "";
display: block;
position: absolute;
width: 0px;
height: 0px;
border: 6px solid transparent;
left: -11px;
border-right-color: #fff;
z-index: 1;
}
.test-sal:after{
content: "";
display: block;
position: absolute;
width: 0px;
height: 0px;
border: 6px solid transparent;
left:-12px;
border-right-color: #000;
z-index: 0;
}
</style>
<div class="test-sal">
</div>