CSS Learning 純CSS畫三角形

2021-09-19 11:33:52 字數 856 閱讀 1231

使用css畫三角形有很多方法,以下將介紹兩種常見的方法:使用邊框法和使用css漸變

首先,我們建立乙個帶邊框的div

將內容設定為空: width: 0, height: 0

最後將不需要的邊框顏色設定為transparent。

這樣子就實現了向下的三角形。但是下邊框還是佔了空間,我們改進一下css**,如下:

.********

使用漸變中的line-gradient,如下例所示:

以上就是兩種使用css畫三角形的方法。

純CSS視差滾動

參考旭哥的 demo點這裡 class box class curtain class comehere div div box curtain comehere 1.原理就是 利用perspective translatez,使得影象在視覺上縮放,然後通過scale將縮放至原來的大小,但是對於滾動...

純CSS繪製箭頭

這幾天研究別人的 發現別人的箭頭居然是用純css寫的。瞬間覺得高大上。細細研究其中的原理,發現其實也很簡單。繪製箭頭,首先應該懂得如何用純css繪製三角形。我們先做乙個寬高為0,有邊框的div看一看效果。width 0 height 0 border 50px solid border color ...

純css畫表情

前端的夥伴們通常提到畫,會想到canvas。很多人致力於用css畫圖,今天用css畫個one兔的形象,其中包括不規則橢圓,圓角三角形,非常有趣哦 class wrap class leftear class lefte class leftea div div div class rightear ...