CSS/HTML 的 純CSS繪制三角形(各種角度)

我們的網頁因為 CSS 而呈現千變萬化的風格。這一看似簡單的樣式語言在使用中非常靈活，只要你發揮創意就能實現很多比人想象不到的效果。特別是隨著 CSS3 的廣泛使用，更多新奇的 CSS 作品涌現出來。

今天給大家帶來 CSS 三角形繪制方法

代碼如下:

#triangle-up {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

}

代碼如下:

#triangle-down {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid red;

}

代碼如下:

#triangle-left {

width: 0;

height: 0;

border-top: 50px solid transparent;

border-right: 100px solid red;

border-bottom: 50px solid transparent;

}

代碼如下:

#triangle-right {

width: 0;

height: 0;

border-top: 50px solid transparent;

border-left: 100px solid red;

border-bottom: 50px solid transparent;

}

代碼如下:

#triangle-topleft {

width: 0;

height: 0;

border-top: 100px solid red;

border-right: 100px solid transparent;

}

代碼如下:

#triangle-topright {

width: 0;

height: 0;

border-top: 100px solid red;

border-left: 100px solid transparent;

}

代碼如下:

#triangle-bottomleft {

width: 0;

height: 0;

border-bottom: 100px solid red;

border-right: 100px solid transparent;

}

代碼如下:

#triangle-bottomright {

width: 0;

height: 0;

border-bottom: 100px solid red;

border-left: 100px solid transparent;

}

您可能感興趣的文章:

總結

以上是生活随笔為你收集整理的html css右下角三角形,纯CSS绘制三角形（各种角度）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。