纯css3实现三角形(上下左右)
第一步:创建一个div
<div class="triangle"></div>
第二步:为class类名triangle添加样式
三角向上:
.triangle{
width:0;
height:0;
border-right:50px solid transparent;
border-left:50px solid transparent;
border-bottom:50px solid red;
}
三角向下:
.triangle{
width:0;
height:0;
border-right:50px solid transparent;
border-left:50px solid transparent;
border-top:50px solid red;
}
三角向左:
.triangle{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-right:50px solid red;
}
三角向右:
.triangle{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left:50px solid red;
}