一、實現原理

在css3中，我們主要使用的是一個transparent的屬性，意思是透明的，比如我們將字體設置為黑色會寫color：black，那么如果想把字體的顏色設置為透明，我們可以寫color：transparent。同理background-color：transparent可以設置背景為透明。

二、 8種三角形實現實例

triangle up 上三角形

#triangle-up{

width:0;

height:0;

border-left:50px?solid?transparent;

border-right:50px?solid?transparent;

border-bottom:100px?solid?black;

}

triangle down 下三角形

#triangle-down{

width:0;

height:0;

border-left:50px?solid?transparent;

border-right:50px?solid?transparent;

border-top:100px?solid?black;}

triangle left 左三角形

#triangle-left{

width:0;

height:0;

border-top:50px?solid?transparent;

border-bottom:50px?solid?transparent;

border-right:100px?solid?black;}

triangle right 右三角形

#triangle-right{

width:0;

height:0;

border-top:50px?solid?transparent;

border-bottom:50px?solid?transparent;

border-left:100px?solid?black;}

triangle top left 左上三角形

#triangle-topleft{

width:0;

height:0;

border-top:100px?solid?black;

border-right:100px?solid?transparent;}

triangle top right 右上三角形

#triangle-topright{

width:0;

height:0;

border-top:100px?solid?black;

border-left:100px?solid?transparent;}

triangle bottom left 左下三角形

#triangle-bottomleft{

width:0;

height:0;

border-bottom:100px?solid?black;

border-right:100px?solid?transparent;}

triangle bottom right 右下三角形

#triangle-bottomright{

width:0;

height:0;

border-bottom:100px?solid?black;

border-left:100px?solid?transparent;}

總結

以上是生活随笔為你收集整理的HTML之CSS画三角形原理,纯CSS写三角形样式集合（原理解析）的全部內容，希望文章能夠幫你解決所遇到的問題。

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