어떻게 만들지: CSS 화살표

CSS를 사용하여 화살표를 만드는 방법을 배우세요.

오른쪽 화살표：

왼쪽 화살표：

위 화살표：

아래 화살표：

화살표를 어떻게 만드는가

第一步 - 추가 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>

第二步 - 추가 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);
{}

Try It Yourself