ฝากล่าวว่าทำไม: 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: โรตาเตท(-45deg);
  -webkit-transform: โรตาเตท(-45deg);
}
.left {
  transform: โรตาเตท(135deg);
  -webkit-transform: โรตาเตท(135deg);
}
.up {
  transform: โรตาเตท(-135deg);
  -webkit-transform: โรตาเตท(-135deg);
}
.down {
  transform: โรตาเตท(45deg);
  -webkit-transform: โรตาเต (45 องศา);
}

亲自试一试