div+css简单三角形绘制

div+css简单三角形绘制原理

主要原理是利用了相邻两个边框的接壤处分配原则，如果没有宽度和高度的话，其实应该是四个三角形接成的矩形。

在矩形的直角，两条边的样式要均分，比如左上角 border-top 和 border-left 的样式要均分，如果border-left 无色透明， border-top有色， 就会出来一个45度的锐角。

代码如下：

<style>
    .box{
        width:0; 
        height:0;
        line-height:0;
        border:100px solid transparent; 
        border-bottom-color:#ccc;
        border-top:0;
    }
</style>
    <div class="box"></div>

效果如图：