用CSS对DIV画三角形

1 原理

一个div，当它的宽和高都是0的时候，它便是一个点。
于是当给它border样式的时候，便发生了以下的变化：

<style>
    div {
        width: 0;
        height: 0;
        border-left: 100px solid yellow;
        border-right: 100px solid red;
        border-top: 100px solid blue;
        border-bottom: 100px solid green;
    }
</style>

2 画三角形方法

只需要将要保留的那边的三角形对应的border保留下来，而保留下来的三角行两边的border设为透明样式即可，比如我要保留右边三角形，只需要：

<style>
    div {
        width: 0;
        height: 0;
        /*border-left: 100px solid yellow;*/
        border-right: 100px solid red;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
    }
</style>

其他同理可得，只需要将保留的border相邻两边的样式设为透明transparent即可。