css如何利用border生成各种方向的小三角形

转自轻轻简记http://www.qingqingjianji.com/article.html?aid=43

业务场景：
在网页上我们经常会看到各种小三角形，像提示框、多级菜单它是必不可少的元素。那么除了用小三角形图片我们用纯CSS怎么实现呢

实现原理：

主要利用border宽的四个参数和颜色的四个参数

效果图：

blob.png

具体实现：

css

.sj{

display: inline-block;

height: 0;

width: 0;

border-style: solid;

}

.sj-bottom {

border-width: 13px 10px 0 10px;

border-color:#ff8400 transparent transparent transparent;

}

.sj-right {

border-width: 10px 0 10px 10px;

border-color: transparent transparent transparent #ff8400;

}

.sj-left {

border-width: 10px 10px 10px 0;

border-color: transparent #ff8400 transparent transparent;

}

.sj-top {

border-width: 0 10px 10px 10px;

border-color: transparent transparent #ff8400 transparent;

}

HTML：

<i class="sj sj-bottom"></i>

<i class="sj sj-right"></i>

<i class="sj sj-left"></i>

<i class="sj sj-top"></i>

补充：

1. 大小颜色可以根据实际情况进行调整
   

2. 如果三角形还要带1px边框线，可以在叠加一个不同颜色的三角形，然后利用定位实现1px边框效果出来。
   

3. 实现三角形方法还有很多，比如可以利用图片，可以利用CSS3旋转，可以利用字体图标，可以利用canvas，可以利用SVG，可以利用HTML字符等。