css 实现三角形

使用css实现三角形样式

<div></div>

<style>
div{
    width:0;
    height:0;
    border-top: 50px solid #ff0000;
    border-bottom: 50px solid #00a000;
    border-left: 50px solid #ff7f50;
    border-right: 50px solid #436eee;
}
</style>

样式如下图：

如果需要取不同方向的三角形，则将其他三边的边框颜色设置为透明即可。比如：取上方的红色三角形
则css代码如下：

<style>
div{
    width:0;
    height:0;
    border-top: 50px solid #ff0000;
    border-bottom: 50px solid transparent;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
</style>

即可得到方向朝下的红色三角形。其中边框的大小影响着三角形的大小。