卡卡網

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

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

HTML標記：

<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

說明：

設置箭頭粗細

設置箭頭粗細的代碼是：

border-width: 0 1px 1px 0;

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

設置箭頭顏色

另外，設置箭頭顏色的代碼是：

border: solid black;

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

設置箭頭大小

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

padding: 3px;

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

標簽: css  箭頭