我是不是真的老了，css小三角的代码，用了无数次，永远都记不住~~~每次都要去翻记录~~~

这一次，我决定用绝招了！搬到我的网站上！！！

#sideProNav dt:before{ 
    position:absolute; 
    content:""; 
    top:13px; left:10px;
    width:0;
    height:0;
    overflow:hidden;
    font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
    line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    border-width:5px 6px 6px 6px;
    border-style:dashed dashed dashed solid;/*IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果*/
    border-color:transparent transparent transparent #333;
}
#sideProNav dl.hasChild dt:before{border-style:solid dashed dashed dashed;
    border-color:#333 transparent transparent transparent; top:15px;border-width:6px 6px 6px 5px;}

border-width一般来讲4个值是一样的，即可以写成 border-width:5px，那么他是一个等边的直角三角形，这样说好像不太明白哦，毕竟好久没读书了哈哈，还是有个图片明了一点。

等边直角三角形哈哈，应该是这么说的。

4个方向都有了

.trianglebig{ width:0; height:0; border-width:50px; border-color: transparent transparent transparent #000; border-style: dashed dashed dashed solid; margin:2em 5px; display:inline-block;}

.trianglebig2{ width:0; height:0; border-width:50px; border-color: transparent transparent #000 transparent; border-style: dashed dashed solid dashed; margin:2em 5px; display:inline-block;}

.trianglebig3{ width:0; height:0; border-width:50px; border-color: transparent #000 transparent transparent; border-style: dashed solid dashed dashed; margin:2em 5px; display:inline-block;}

.trianglebig4{ width:0; height:0; border-width:50px; border-color:#000 transparent transparent transparent ; border-style:solid dashed dashed dashed ; margin:2em 5px; display:inline-block;}

关键的部分已经标注了红色 

border-style:dashed dashed dashed solid; 这句里面的dashed据说是为了ie6写的。现在谁还有ie6吗？？？全部写成solid也是可以实现的，哎呀，不理啦，照着复制好了。

这个三角形有点扁，有时候我们会需要尖一点的三角形。那么这个时候就需要改一下border-width的值 。假设我们做的是一个向下的三角 ，我们就需要把border-width的第一个值改大，效果如图

border-width:80px 50px 50px 50px

border-width:100px 50px 50px 50px

border-width:120px 50px 50px 50px

值越大角度就越小，也就越尖了。我们根据自己的需要修改即可。