純CSS繪制三角形（各種角度）
更新時間：2013年10月29日 09:55:47 作者：
CSS三角形繪制方法，學會了這個，其它的也就簡單。
我們的網(wǎng)頁因為 CSS 而呈現(xiàn)千變?nèi)f化的風格。這一看似簡單的樣式語言在使用中非常靈活，只要你發(fā)揮創(chuàng)意就能實現(xiàn)很多比人想象不到的效果。特別是隨著 CSS3 的廣泛使用，更多新奇的 CSS 作品涌現(xiàn)出來。
今天給大家?guī)?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;
}
今天給大家?guī)?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 絕對路徑與相對路徑概念詳細,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-08-08
li的簡單應用...
2007-03-03 
DIV+CSS 英文命名規(guī)范...
2007-09-09 
這篇文章主要為大家詳細介紹了Javascript的閉包概念，使用數(shù)據(jù)庫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03 
css濾鏡效果（二）...
2007-03-03 
第3天:定義語言編碼...
2006-12-12 
RGB 加成色 說明...
2007-12-12 