css로 삼각형 만들기 1

주로 border를 활용하여 삼각형을 만듭니다.
먼저, border-width에서 가리키고자 하는 방향의 반대방향의 수치를 적용합니다. 그리고 방향을 꼭지점까지 사선으로 감싸는 수치를 지정하게 되는데, 반대방향의 반만큼 지정합니다.

위쪽 방향

위쪽 방향은 bottom의 수치를 지정해주고, right와 left를 bottom의 1/2 수치로 지정해줍니다.

<div class="triangle01"></div>

.triangle01 {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 80px 40px;
    border-color: transparent transparent #ffd67a transparent;
}

---

아랫쪽 방향

아래쪽 방향은 top의 수치를 지정해주고, right와 left를 bottom의 1/2 수치로 지정해줍니다.

<div class="triangle02"></div>

.triangle02 {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 80px 40px 0 40px;
    border-color: #ffd67a transparent transparent transparent;
}

---

오른쪽 방향

오른쪽 방향은 left의 수치를 지정해주고, top와 bottom을 left의 1/2 수치로 지정해줍니다.

<div class="triangle03"></div>

.triangle03 {
    width: 0px;
    height: 0;
    border-style: solid;
    border-width: 40px 0 40px 80px;
    border-color: transparent transparent transparent #ffd67a;
}

---

왼쪽 방향

왼쪽 방향은 right의 수치를 지정해주고, top와 bottom을 right의 1/2 수치로 지정해줍니다.

<div class="triangle04"></div>

.triangle04 {
    width: 0px;
    height: 0;
    border-style: solid;
    border-width: 40px 80px 40px 0;
    border-color: transparent #ffd67a transparent transparent;
}

---

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