卡卡網(wǎng)

本文介紹如何用純CSS實(shí)現(xiàn)上下左右箭頭（>）。

CSS實(shí)現(xiàn)上下左右箭頭

HTML標(biāo)記：

<p>Right arrow: <i class="right"></i></p>
<p>Left arrow: <i class="left"></i></p>
<p>Up arrow: <i class="up"></i></p>
<p>Down arrow: <i class="down"></i></p>

CSS代碼：

i {
  border: solid black;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

execcodegetcode

說(shuō)明：

設(shè)置箭頭粗細(xì)

設(shè)置箭頭粗細(xì)的代碼是：

border-width: 0 1px 1px 0;

我們只需把1px改為其他數(shù)字如3px，就得到不同粗細(xì)的箭頭。

設(shè)置箭頭顏色

另外，設(shè)置箭頭顏色的代碼是：

border: solid black;

 只需把black改為其他顏色，箭頭就會(huì)變成其他顏色。

設(shè)置箭頭大小

我們還可以設(shè)置箭頭的大小，代碼是：

padding: 3px;

把3px改為其他數(shù)字如5px，箭頭就會(huì)變大。

標(biāo)簽: css  箭頭