ccs로 화살표 만들기 2 (가상요소 ::before, ::after 활용)

css로 삼각형 만들기 1편에서 만든 삼각형에 가상요소를 생산하여, 가운데 막대를 만들어줍니다.
기본원리는 삼각형과 사각형의 조합입니다.

위쪽 방향

삼각형 위쪽 방향을 만든 후, 가상요소의 범위를 정하는 position: relative; 를 지정합니다.
::after에서는 사각형을 만든 후 top 위치를 삼각형의 높이 만큼 위치해줘야 면과 면이 닿을 수 있습니다.
사각형은 삼각형의 정중앙 바로 아래에 배치하기 위해  translate(-50%, 0%)을 사용합니다. -50%는 개체의 너비의 가운데에 위치시키는 것을 의미합니다.

<div class="arrow01"></div>

.arrow01 {
    position: relative;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 60px 40px;
    border-color: transparent transparent #ffd67a transparent;
}

.arrow01::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #ffd67a;
    top: 60px;
    transform: translate(-50%, 0%);
}

---

아래쪽 방향

위에서 만든 위쪽 방향 코드에서 기울이기(rotate)를 180deg로 돌려줍니다.

<div class="arrow02"></div>

.arrow02 {
    position: relative;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 60px 40px;
    border-color: transparent transparent #ffd67a transparent;
    transform: rotate(180deg);
}

.arrow02::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #ffd67a;
    top: 60px;
    transform: translate(-50%, 0%);
}

---

오른쪽 방향

마찬가지로 기울이기(rotate)를 90deg로 돌려줍니다.

<div class="arrow03"></div>

.arrow03 {
    position: relative;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 60px 40px;
    border-color: transparent transparent #ffd67a transparent;
    transform: rotate(90deg);
}

.arrow03::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #ffd67a;
    top: 60px;
    transform: translate(-50%, 0%);
}

---

왼쪽 방향

오른쪽방향에서 역방향으로 (rotate)를 -90deg로 돌려줍니다.

<div class="arrow04"></div>

.arrow04 {
    position: relative;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 60px 40px;
    border-color: transparent transparent #ffd67a transparent;
    transform: rotate(-90deg);
}

.arrow04::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #ffd67a;
    top: 60px;
    transform: translate(-50%, 0%);
}

---

position: absolute; 로 중앙(가운데)에 맞추기

---

이 포스팅은 쿠팡 파트너스 활동의 일환으로 이에 따른 일정액을 수수료를 제공받고 있습니다