欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

/*箭頭向上*/

.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代碼代碼運(yùn)行結(jié)果：

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

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

昨天在修改三欄主題的時(shí)候，有用戶反饋說，要加入一個(gè)左右大箭頭。雖然實(shí)現(xiàn)起來很簡單(可以使用背景圖片代替)，但是要加一個(gè)后臺(tái)可以自定義顏色的功能，所以就想到了利用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代碼代碼運(yùn)行結(jié)果：

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

transform: rotate(-135deg);/*調(diào)整旋轉(zhuǎn)的角度*/