css3實現三角形(上下左右)
阿新 • • 發佈:2019-01-01
實現三角形的繪製很簡單。
第一步:新建一個div。
<div class="kailong"></div>
第二步:為盒子新增樣式。
1.向上
.kailong{
width:0;
height:0;
border-right:50px solid transparent;
border-left:50px solid transparent;
border-bottom:50px solid red;
}
2.向下
.kailong{ width:0; height:0; border-right:50px solid transparent; border-left:50px solid transparent; border-top:50px solid red; }
3.向左
.kailong{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-right:50px solid red;
}
4.向右
.kailong{ width:0; height:0; border-top:50px solid transparent; border-bottom:50px solid transparent; border-left:50px solid red; }
至此css3實現三角形的繪製完成了。