css如何將div畫成三角形

2022-04-28 03:24:54 字數 1732 閱讀 1338

先看一段**:

#div1
根據**渲染,顯示效果如下(邊框顏色border-color四個值預設的載入方向,top right bottom left):

根據css**,邊框的寬度都是100px,div高度和寬度也是100px,但是這個和三角形有什麼關聯嗎?

不急再看乙個圖,我們把div寬度和高度設定為0。

css**:

#div1
瀏覽器就渲染出如下:

咦,每個邊都是三角形? (可以試試只把div高寬其中乙個設定為0,另乙個100px)

既然有三角形了,下面就好辦了。比如我要藍色的三角形,把其它三個邊顏色都去掉不就可以了嘛:

藍色三角形不就得到了。

審查元素一看,問題就出來了:

雖然其它三個邊都隱藏了,位置還在,怎麼把多餘的位置去掉呢?

試著修改下邊框的寬度(寬度值對應:top right bottom left):

先把boder-width第乙個值改為50px試試:

#div1
修改前:

修改後:

發現上面多餘的地方少了一半,設定border-width第乙個值為0px試試:

檢視元素已經完全是三角形的高度了

至此三角形就完成了。

那想其它三角形,應該怎麼辦?

再看下上面的圖:

就以藍色的三角形為例,它的高度,就是css中設定的100px。那它的底邊的長度和其它兩個邊的長度怎麼來的呢?

哈哈,問的跟個小學生題一樣。

藍色三角形(bottom)其實從它的頂點垂直下來一條線為準,將藍色三角形分為左右兩個小三角形,左邊小三角形底邊受left值影響,右邊小三角形底邊受right值影響。

其它一樣:

top最長邊=left值+right值=200px

left最長邊=top值+bottom值=200px

明白以上關係,就能隨便繪製什麼三角形了,如將藍色三角形渲染為直角三角形(還是以上面**為例):

css如何將div畫成三角形

首先了解一下盒模型 盒模型先看一段 div1 根據 渲染,顯示效果如下 邊框顏色border color四個值預設的載入方向,top right bottom left 根據css 邊框的寬度都是100px,div高度和寬度也是100px,但是這個和三角形有什麼關聯嗎?不急再看乙個圖,我們把div寬...

css繪製向左三角形 CSS繪製三角形

1.繪製乙個外邊框 div 2.重定義外邊框樣式 當外邊框有了寬度,不知大家是否想乙個問題,相鄰的線條邊界在哪,下面通過把外邊框相鄰側邊設定不同顏色來觀察 使用下面的語句替換上面的border定義 border bottom 50px solid 555555 border top 50px sol...

css 修改三角形大小 css實現三角形

最近的乙個專案頁面中,有很多三角形icon,在不考慮ie相容性下,使用了css實現三角形,記錄一下 1 實心三角形,利用transparent實現 1 設定線條寬50px,div 寬高0 width 0px height 0px border right 100px solid red border...