方法1:利用border属性
.triangle{
width: 0;
height: 0;
//只有上边框有颜色,其它为透明
border-color: red transparent transparent transparent;
border-style: solid;
border-width: 10px;
}
方法2:利用CSS3的clip-path属性
.triangle{
width: 10px;
height: 10px;
background: red;
//将坐标(0,0),(5,10),(10,0)连成一个三角形
clip-path: polygon(0px 0px, 5px 10px, 10px 0px);
//旋转180°,变成下三角
transform: rotate(180deg);
}