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>
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);
}

说明:

设置箭头粗细

设置箭头粗细的代码是:

  • border-width: 0 1px 1px 0;

我们只需把1px改为其他数字如3px,就得到不同粗细的箭头。

设置箭头颜色

另外,设置箭头颜色的代码是:

  • border: solid black;

 只需把black改为其他颜色,箭头就会变成其他颜色。

设置箭头大小

我们还可以设置箭头的大小,代码是:

  • padding: 3px;

3px改为其他数字如5px,箭头就会变大。

作者 meiyoufan

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注