使用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 ...