css實現上下左右三角形
阿新 • • 發佈:2021-01-25
技術標籤:前端踩坑合集
寫一個div
<div class="triangle"></div>
1.向上
.triangle{
width:0;
height:0;
border-right:50px solid transparent;
border-left:50px solid transparent;
border-bottom:50px solid red;
}
2.向下
.triangle{
width:0;
height:0;
border-right:50px solid transparent;
border- left:50px solid transparent;
border-top:50px solid red;
}
3.向左
.triangle{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-right:50px solid red;
}
4.向右
.triangle{
width:0;
height:0;
border-top:50px solid transparent;
border- bottom:50px solid transparent;
border-left:50px solid red;
}