通过css做出一个三角形
示例
.test{
width: 100px;
height: 100px;
border-top: 30px solid #000;
border-right: 30px solid #ff0000;
border-left: 30px solid #00ff00;
border-bottom: 30px solid #0000ff;
}
我们把长宽设置为0px,在看看效果
.test{
width: 0px;
height: 0px;
border-top: 30px solid #000;
border-right: 30px solid #ff0000;
border-left: 30px solid #00ff00;
border-bottom: 30px solid #0000ff;
}
我们把底部border隐藏起来,在看看效果
.test{
width: 0px;
height: 0px;
border-top: 30px solid #000;
border-right: 30px solid #ff0000;
border-left: 30px solid #00ff00;
border-bottom: 30px solid transparent; /隐藏起来/
}
我们接着把左右边框的border隐藏起来,在看看效果
.test{
width: 0px;
height: 0px;
border-top: 30px solid #000;
border-right: 30px solid transparent; /隐藏右边/
border-left: 30px solid transparent; /隐藏左边/
border-bottom: 30px solid transparent; /隐藏下边/
}