網頁很多時候都應用了css3來寫三角形，那么css3要怎么寫三角形呢？下面我們來看一下css3寫三角形的方法。

css3寫三角形(為了好區分姑且按方向區別)：

HTML代碼：

css代碼：/*箭頭向上*/

.arrow-up {

width:0;

height:0;

border: 30px solid transparent;

border-bottom:20px solid red;

}

/*箭頭向下*/

.arrow-down {

width:0;

height:0;

border: 30px solid transparent;

border-top:20px solid #0066cc;

}

/*箭頭向左*/

.arrow-left {

width:0;

height:0;

border: 30px solid transparent;

border-right:30px solid yellow;

}

/*箭頭向右*/

.arrow-right {

width:0;

height:0;

border: 30px solid transparent;

border-left: 50px solid green;

}

效果圖：

border 簡寫屬性在一個聲明設置所有的邊框屬性。

可以按順序設置如下屬性：border-width

border-style

border-color

如果不設置其中的某個值，也不會出問題，比如 border:solid #ff0000; 也是允許的。border-width 規定邊框的寬度。

border-style 規定邊框的樣式。

border-color 規定邊框的顏色。

inherit 規定應該從父元素繼承 border 屬性的設置。

總結

以上是生活随笔為你收集整理的html写三角形,css3怎么写三角形？的全部內容，希望文章能夠幫你解決所遇到的問題。

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