css로 별모양 만들기(가상요소 ::before, ::after 활용)

같은 수치의 도형을 가상요소를 포함해 2개 이상만들어내서,
이번 파트의 핵심요소인 기울기(rotate)를 통해 다각형의 별 모양을 만들 수 있습니다. 

오각별(오각성)

삼각형을 3개 생성한 후, 기울이기(rotate)를 사용하여 꼭지점 5개짜리 별을 만듭니다.

<div class="pentagram"></div>

.pentagram {    
    position: relative;
    display: inline-block;
    width: 0px;
    height: 0px;
    margin: 50px 0;
    color: #ffd67a;    
    border-right: 80px solid transparent;
    border-left: 80px solid transparent;
    border-bottom: 56px  solid #ffd67a;    
    transform: rotate(35deg);
}
    
.pentagram::before,
.pentagram::after{
    content: "";
    position: absolute;
    width: 0px;
    top: 0;
    height: 0px;
    color: #ffd67a;    
    left: -80px;        
    border-right: 80px solid transparent;
    border-left: 80px solid transparent;
    border-bottom: 56px solid #ffd67a;
}
    
.pentagram::before {
    transform: rotate(71deg);
}
    
.pentagram::after {
    transform: rotate(-71deg);
}

---

육각별(육각성)

육각별은 오각별보다 간단합니다.
정삼각형을 2개 만든 후 가상요소(::before 또는 ::after)를 상하반전을 시켜서 포지션을 맞춰줍니다. 

<div class="hexagram"></div>

.hexagram {
    position: relative;
    width: 0;
    height: 0;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
    border-bottom: 100px solid #ffd67a;
}
    
.hexagram::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 30px;
    left: -50px;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;	
    border-bottom: 100px solid #ffd67a;
    transform: rotate(180deg);
}

 

---

팔각별(팔각성)

꼭지점이 8개이므로, 정사각형을 2개 만든후 가상요소(::before 또는 ::after)를 45도 회전시켜서 포지션을 맞춰줍니다. 

<div class="octagram"></div>

.octagram {
    position: relative;
    width: 80px;
    height: 80px;
    background: #ffd67a;	
}
    
.octagram::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    background: #ffd67a;
    transform:rotate(45deg);
}

---

css로 삼각형 만들기 1

css로 사각형 만들기

---

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