/*箭頭向上*/

.to_top {

width: 0;

height: 0;

border-bottom: 10px solid #ccc;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

}

/*箭頭向下*/

.to_bottom {

width: 0;

height: 0;

border-top: 10px solid #ccc;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

}

/*箭頭向左*/

.to_left {

width: 0;

height: 0;

border-right: 10px solid #ccc;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

}

/*箭頭向右*/

.to_right {

width: 0;

height: 0;

border-left: 10px solid #cccf;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

}

HTML代碼代碼運行結果：

如果你感覺箭頭過大或太小，以及顏色不是你想要的，我們可以通過調整DIV的邊框的粗細以及顏色來，來調整箭頭的大小。

DIV+CSS實現(xiàn)大箭頭的效果

昨天在修改三欄主題的時候，有用戶反饋說，要加入一個左右大箭頭。雖然實現(xiàn)起來很簡單(可以使用背景圖片代替)，但是要加一個后臺可以自定義顏色的功能，所以就想到了利用DIV+CSS來畫箭頭，這樣自己可以很方便的給箭頭自定義顏色啦。

CSS代碼：

.text{

display: inline-block;

border-top: 2px solid;

border-right: 2px solid;

width: 100px;

height: 100px;

border-color: #EA6000;

transform: rotate(-135deg);

margin: 50px auto auto 100px;

}

HTML代碼代碼運行結果：

我們可以通過修改C以下的代碼，進行箭頭方式的改充數(shù)，也可以修改，width(寬)與height(高)，來實現(xiàn)箭頭大小的改變。

transform: rotate(-135deg);/*調整旋轉的角度*/