css画三角形、梯形

这是百度曾经的面试题—怎么样css画出三角形呢？我们先来看以下代码的效果：

<!--html内容-->
<div></div>

/*css内容*/
div {
    width:0px;
    height: 0px;
    border: 100px solid black;
    border-color: blue yellow red green;
}

效果：

这样我们就拥有了由四个三角形拼成的正方形了。那么怎么变为三角形呢？参见以下代码：

<!--html内容-->
<div></div>

/*css内容*/
/*css内容*/
div {
    width:0px;
    height: 0px;
    border: 100px solid black;
    border-color: blue transparent transparent transparent;
}

效果：

其实也就是用到了transparent（透明）属性。依此类推，可以画出各个方向的三角形。
有了上面的基础，画梯形也很容易了：

<!--html内容-->
<div></div>

/*css内容*/
div {
    width:10px;
    height: 10px;
    border: 100px solid black;
    border-color: blue yellow red green;
}

效果：

同样使用transparent属性便可以画出梯形。