CSS - 다각형(삼각형/오각형/팔각형/별/하트) 만들기

닌니디자인 CSS 썸네일

border

HTML 요소의 테두리를 설정하는 속성. border-width, border-style, border-color의 속성이 있고 각각 테두리의 두께, 모양, 색상을 조절한다. border-left, border-top, border-right, border-bottom 속성들을 이용하면 각각의 테두리 면을 개별적으로 설정할 수 있기 때문에 border-top-width와 같은 세부속성도 설정할 수 있다. 축약해서 사용시 border: width style color 순으로 입력한다. border-radius 속성은 요소의 모서리를 둥글게 한다.

border-width	테두리의 두께	단위가 있는 수치(px, em, rem 등)이나, 키워드(thin, medium, thick)
border-style	테두리의 모양	none: 테두리가 없음 solid: 실선 테두리 dotted: 점선 테두리 dashed: 대쉬된 선 테두리 double: 이중선 테두리 groove: 오목한 테두리 ridge: 돌출된 테두리 inset: 요소가 들어간 것처럼 보이는 테두리 outset: 요소가 돌출된 것처럼 보이는 테두리
border-color	테두리의 색상	색상 이름, HEX, RGB, RGBA, HSL, HSLA 등
border-radius	모서리의 둥근 정도	px, % (축약 X)

 

 

 

삼각형

위

 

#triangle-up { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 100px solid red;
}

 

아래

 

#triangle-up { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 100px solid red;
}

 

왼쪽

 

#triangle-up { 
    width: 0; 
    height: 0; 
    border-top: 50px solid transparent; 
    border-bottom: 50px solid transparent; 
    border-right: 100px solid red;
}

 

오른쪽

 

#triangle-up { 
    width: 0; 
    height: 0; 
    border-top: 50px solid transparent; 
    border-bottom: 50px solid transparent; 
    border-left: 100px solid red;
}

 

 

 

---

 

가상요소(::before, ::after)

::before와 ::after는 특정 요소의 콘텐츠 앞이나 뒤에 콘텐츠를 삽입할 수 있게 해주는 요소. 이 가상 요소들은 실제 HTML 구조를 변경하지 않고도 시각적 효과를 추가할 수 있어 스타일링을 유연하게 할 수 있다.

check_circle Check

::before, ::after 요소를 사용하려면 content 속성을 필수로 사용해야 한다.

 

 

 

오각형

 

 

#pentagon {
  position: relative;
  width: 54px;
  box-sizing: content-box;
  border-width: 50px 18px 0;
  border-style: solid;
  border-color: red transparent;
  margin-top: 2.5em 0 -1.5em;
}
#pentagon:before {
  content: "";
  position: absolute;
  top: -63px;
  border-width: 0 45px 35px;
  border-style: solid;
  border-color: transparent transparent red;
}

 

육각형

 

 

 

#hexagon {
  width: 100px;
  height: 55px;
  background: red;
  position: relative;
  margin: 2em 0;
}
#hexagon::before {
  content: "";
  position: absolute;
  top: calc(-3em - 10px);
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 30px solid red;
}
#hexagon::after {
  content: "";
  position: absolute;
  bottom: calc(-3em - 10px);
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 30px solid red;
}

 

 

 

별

6각성

 

 

#star-six {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid red;
  position: relative;
  margin-bottom: 1.5em;
}
#star-six:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 80px solid red;
  top: 25px;
}

 

5각성

 

 

 

 #star-five {
  margin: 50px 0;
  position: relative;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(35deg);
}
#star-five:before {
  content: '';
  position: absolute;
  border-bottom: 80px solid red;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  top: -79px;
  left: 25px;
  transform: rotate(-35deg);
}
#star-five:after {
  content: '';
  position: absolute;
  top: -17px;
  left: -17px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
}