html5 css 三角形,css怎么画三角形？
css怎么畫三角形？下面本篇文章就來給大家介紹一下使用CSS畫三角形的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。
css怎么畫三角形？
三角形實現原理：寬度width為0；height為0；
方法：設置div長寬為0，只用邊框寬填充，三角形的底部邊框設置顏色，剩下的三邊用透明邊框設置即可。使用border屬性即可設置邊框顏色。
(1)有一條橫豎邊(上下左右)的設置為border-方向：長度 solid red，這個畫的就是底部的直線。其他邊使用border-方向：長度 solid transparent。
(2)有兩個橫豎邊(上下左右)的設置，若斜邊是在三角形的右邊，這時候設置top或bottom的直線，和右邊的斜線。若斜邊是在三角形的左邊，這時候設置top或bottom的直線，和左邊的斜線。
1、Triangle Up
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
2、Triangle Down
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
3、Triangle Left
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
4、Triangle Right
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
5、Triangle Top Left
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
6、Triangle Top Right
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
7、Triangle Bottom Left
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
8、Triangle Bottom Right
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
更多前端開發知識，請查閱 HTML中文網 ！！
總結
以上是生活随笔為你收集整理的html5 css 三角形,css怎么画三角形？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机软件应用员,济宁计算机办公应用软件
- 下一篇： 支付宝 android 2.3,app被