在CSS Tricks上有很多不同的CSS形狀- CSS的形狀，我特別對(duì)三角形感到困惑：#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;}<div id="triangle-up"></div>它是如何以及為什么有效？
4 回答
12345678_0001
TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊
CSS三角形：五幕中的悲劇
相等寬度的邊界以45度角相互對(duì)接：
當(dāng)您沒(méi)有頂部邊框時(shí)，它看起來(lái)像這樣：
然后你給它寬度為0 ......
......高度為0 ......
......最后，你讓兩個(gè)邊框透明：
這導(dǎo)致了一個(gè)三角形。
米脂
TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超3個(gè)贊
從基本方塊和邊框開(kāi)始。每個(gè)邊框都會(huì)有不同的顏色，所以我們可以區(qū)分它們：
.triangle {
border-color: yellow blue red green;
border-style: solid;
border-width: 200px 200px 200px 200px;
height: 0px;
width: 0px;}這給你這個(gè)：
但是不需要頂部邊框，所以將其寬度設(shè)置為0px?，F(xiàn)在我們的邊界底部200px將使我們的三角形高200px。
.triangle {
border-color: yellow blue red green;
border-style: solid;
border-width: 0px 200px 200px 200px;
height: 0px;
width: 0px;}我們會(huì)得到這個(gè)：
然后隱藏兩個(gè)邊三角形，將border-color設(shè)置為透明。由于頂部邊框已被有效刪除，我們也可以將border-top-color設(shè)置為透明。
.triangle {
border-color: transparent transparent red transparent;
border-style: solid;
border-width: 0px 200px 200px 200px;
height: 0px;
width: 0px;}最后我們得到了這個(gè)：
慕妹3242003
TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超6個(gè)贊
而現(xiàn)在完全不同的東西......
不要使用css技巧，不要忘記像html實(shí)體一樣簡(jiǎn)單的解決方案：
▲
結(jié)果：
▲
請(qǐng)參閱：上下三角形的HTML實(shí)體是什么？
添加回答
舉報(bào)
0/150
提交
取消