如何创建：CSS 箭头

学习如何使用 CSS 创建箭头。

右箭头：

左箭头：

上箭头：

下箭头：

如何创建箭头

第1步 - 添加 HTML：

<p>右箭头: <i class="arrow right"></i></p>
<p>左箭头: <i class="arrow left"></i></p>
<p>上箭头: <i class="arrow up"></i></p>
<p>下箭头: <i class="arrow down"></i></p>

第2步 - 添加 CSS：

.arrow {
  border: solid black;
  border-width: 0 3px 3px 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);
{}

自分で試してみる