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>

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