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>

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