css로 삼각형 만들기 2

삼각형 만들기 1편과 마찬가지로 border를 활용하여 삼각형 방향을 지정할 수 있습니다.
정삼각형과는 달리, 이번에 만들 삼각형은 너비(width)를 2곳만 지정합니다.

왼쪽 위 방향

top와 right에 수치를 넣어줍니다.
색상(border-color)은 top에만 넣고 나머지는 색상없음(transparent)으로 지정합니다.

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

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

---

오른쪽 위 방향

right와 bottom에 수치를 넣어줍니다.
색상(border-color)은 right에만 넣고 나머지는 색상없음(transparent)으로 지정합니다.

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

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

---

왼쪽 아래 방향

top와 left에 수치를 넣어줍니다.
색상(border-color)은 left에만 넣고 나머지는 색상없음(transparent)으로 지정합니다.

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

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

---

오른쪽 아래 방향

bottom와 left에 수치를 넣어줍니다.
색상(border-color)은 bottom에만 넣고 나머지는 색상없음(transparent)으로 지정합니다.

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

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

---

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