1、利用Css 的border绘制三角形的原理：
div的border是有宽度和颜色的，当div的宽度比较大的时候，比如上面代码每个边100像素，颜色又不一样，浏览器怎么渲染颜色呢？经测试发现，宽度较大的border相交时：
1、只有相邻边才会相交，对边是不可能相交的
2、相交区域(显然是矩形)按对角线划分成两个三角形，两个三角形分别渲染成两个边的颜色，颜色不会出现重叠的情况
3、调整四个边的宽度，加上中间区域的宽度，配以不同颜色和透明，各种简单多边形(举一反三)已经不在话下了
<html>
<style>
*{margin:0px; padding: 0px;}
.tran{
position: relative;
left:10px;
top:10px;
width: 50px;
height: 50px;
border-bottom: 10px solid red;
border-left: 10px solid green;
border-top: 10px solid red;
border-right: 10px solid green;
}
</style>
<div class="tran"></div>
</html>
效果图：
三角形：
<html>
<style>
*{margin:0px; padding: 0px;}
.tran{
position: relative;
left:10px;
top:10px;
width:0;
height:0;
/*border-bottom: 100px solid red;*/
border-left: 100px solid transparent;
border-top: 100px solid red; /*要形成上面的三角形，需要设置上面这条边有颜色，左边和右边透明*/
border-right: 100px solid transparent;
}
</style>
<div class="tran"></div>
</html>
效果图
