css怎么畫三角形？下面本篇文章就來給大家介紹一下使用CSS畫三角形的方法。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對大家有所幫助。

css怎么畫三角形？

三角形實(shí)現(xiàn)原理：寬度width為0；height為0；

方法：設(shè)置div長寬為0，只用邊框?qū)捥畛?#xff0c;三角形的底部邊框設(shè)置顏色，剩下的三邊用透明邊框設(shè)置即可。使用border屬性即可設(shè)置邊框顏色。

(1)有一條橫豎邊(上下左右)的設(shè)置為border-方向：長度 solid red，這個(gè)畫的就是底部的直線。其他邊使用border-方向：長度 solid transparent。

(2)有兩個(gè)橫豎邊(上下左右)的設(shè)置，若斜邊是在三角形的右邊，這時(shí)候設(shè)置top或bottom的直線，和右邊的斜線。若斜邊是在三角形的左邊，這時(shí)候設(shè)置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;

}

更多前端開發(fā)知識(shí)，請查閱 HTML中文網(wǎng) ！！

總結(jié)

以上是生活随笔為你收集整理的html5 css 三角形,css怎么画三角形？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。