css로 다각형 만들기(가상요소 ::before, ::after 활용)

가상요소를 활용하기 앞서 가장 먼저 필수적인, 부모역할을 하는 본체에 position: relative; 를 지정해줍니다.
다음으로 부모라는 보호아래, 아이역할을 하는 ::before와 ::after에는 content: "";와 position: absolute;를 지정해주면서 포지션을 맞춰줍니다.

오각형

아래 본체(pentagon)는 사다리꼴(css로 사각형 만들기 참조)로 만든 후,
가상요소인 ::before로 삼각형(css로 삼각형 만들기 1 참조)을 만들어줍니다.

<div class="pentagon"></div>

.pentagon {
    position: relative;
    width: 50px;
    height: 0;
    border-style: solid;
    border-width: 45px 20px 0;
    border-color: #ffd67a transparent;
}
    
.pentagon::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -80px;
    left: -20px;
    border-style: solid;
    border-width: 0 45px 35px 45px;
    border-color: transparent transparent #ffd67a transparent;
}

---

육각형

가운데 본체(hexagon)을 직사각형을 만든 후,
가상요소인 ::before와 ::after를 서로 다른 방향으로 삼각형을 만듭니다.

<div class="hexagon"></div>

.hexagon {
    position: relative;
    width: 80px;
    height: 40px;
    background-color: #ffd67a;
}
    
.hexagon::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -25px;
    border-style: solid;
    border-width: 0 40px 25px 40px;
    border-color: transparent transparent #ffd67a transparent;
}
    
.hexagon::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 40px;
    border-style: solid;
    border-width: 25px 40px 0 40px;
    border-color: #ffd67a transparent transparent transparent;
}

---

팔각형

가운데 본체(octagon)을 직사각형을 만든 후,
가상요소인 ::before와 ::after를 서로 다른 방향으로 사다리꼴을 만듭니다.

<div class="octagon"></div>

.octagon {
    width: 100px;
    height: 40px;
    background: #ffd67a;
    position: relative;
}

.octagon:before {
    content: "";
    position: absolute;
    top: -30px;
    left: 0;
    width: 40px;
    height: 0;
    border-style: solid;
    border-width: 0 30px 30px;
    border-color: transparent transparent #ffd67a transparent;
}

.octagon:after {
    content: "";
    position: absolute;
    top: 40px;
    left: 0;
    width: 40px;
    height: 0;
    border-style: solid;
    border-width: 30px 30px 0;
    border-color: #ffd67a transparent;
}

---

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