/*箭頭向上*/
.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í)現(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代碼代碼運(yùn)行結(jié)果：
我們可以通過修改C以下的代碼，進(jìn)行箭頭方式的改充數(shù)，也可以修改，width(寬)與height(高)，來實(shí)現(xiàn)箭頭大小的改變。
transform: rotate(-135deg);/*調(diào)整旋轉(zhuǎn)的角度*/
該文章在 2022/10/21 10:05:14 編輯過
400 186 1886
