html 左右三角,css3实现三角形（上下左右）
第一步：新建一个div。
第二步：为盒子添加样式。
1.向上
div{
width:0;
height:0;
border-right:50px solid transparent;
border-left:50px solid transparent;
border-bottom:50px solid red;
}
2.向下
div{
width:0;
height:0;
border-right:50px solid transparent;
border-left:50px solid transparent;
border-top:50px solid red;
}
3.向左
div{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-right:50px solid red;
}
4.向右
div{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left:50px solid red;
}
第一步：新建一个div。 第二步：为盒子添加样式。 1.向上 div{ width:0; height:0; border-right:50px solid transparent; border-left:50px solid transparent; border-bottom:50px solid red; } 2.向下 div{ width:0; height:0; border-right:50px solid transparent; border-left:50px solid transparent; border-top:50px solid red; } 3.向左 div{ width:0; height:0; border-top:50px solid transparent; border-bottom:50px solid transparent; border-right:50px solid red; } 4.向右 div{ width:0; height:0; border-top:50px solid transparent; border-bottom:50px solid transparent; border-left:50px solid red; }