使用css写出三角形

使用css写出三角形

CSS实现绘制三角形

面试突然问的一个css题，一开始都没反应过来，然后现在整理一下供大家参考。

箭头向上的三角形
.up{
width:0;height:0;
border-width:0 50px 50px; //对应 上 左右 下
border-style:solid; //边框样式
border-color:transparent transparent red; //同上 对应 上(透明) 左右(透明) 下(红色)
}
.down{
width:0;height:0;
border-width:50px 50px 0; //对应 上 左右 下
border-style:solid; //边框样式
border-color:red transparent transparent; //同上 对应 上(红色) 左右(透明) 下(透明)
}
.left{
width:0;height:0;
border-width:50px 50px 50px 0; //对应 上 右 下 左
border-style:solid; //边框样式
border-color:transparent red; // 对应 上下(透明) 左右(红色)
}
.right{
width:0;height:0;
border-width:50px 0 50px 50px; //对应 上 右 下 左
border-style:solid; //边框样式
border-color:transparent red; // 对应 上下(透明) 左右(红色)
}