border-width和border其它属性配合实现的小三角形

{
width: 100px;
height: 100px;
border-width: 30px 0px 30px 30px;
border-style: solid;
border-color:red
}

宽高都被定义了，border的显示是正常的效果。倘若加上border-left-color:#d0d0d0,可以看到左方向的边框站位应该是这样子的。

把width改为0px或不定义width,会出现这种效果。

回到第一张三角形图，就不难理解三角形的出现了。border的宽度定义了之后会被满足，但是由于div的width,height都没有被定义。左边框的内侧汇集成一点就是一个三角形了。

这种显示效果可以做出一些小效果。如这种标签：

话不多说了，上布局

html:
<ul>
     <li>
          <a>lalala</a>
     </li>
     <li>
          <a>cool</a>
     </li>
</ul>
 
css:
li{
position:relative;
}
a::before{
content:””;
position:absolute;
left:0;
top:5px;
border-style:solid;
border-color:transparent;
border-left-color: #f7f9f8;
border-width:7px 4px;
}
 
a::after{
content:””;
position:absolute;
right: -5px;
top:5px;
border-style:solid;
border-color:transparent;
border-left-color: #f7f9f8;
border-width:7px 4px;
}

谢幕