CSS border로 삼각형 그리기

개발 공부/CSS

차정 2023. 1. 12. 11:56

css border로 삼각형을 그릴수 있다는 것을 알게되었다.

충 격...

border가 왜 삼각형이 되는거야...

알고보니 우리가 아는 border는 각각 그 모서리에 각도를 가지고 있었던 것이었다...!!

.border {
  width: 100px;
  height: 100px;
  border: 10px solid red;  
  border-right: 10px solid transparent;  
}

그러니까 내부의 크기를 0으로 하고 border로만 영역을 채운뒤에
세 변의 border를 삭제하면=> 남아있는 border가 삼각형모양으로 보이는것이다..

응용하면 딱지모양 ☒ 도 만들 수 있고, 가운데가 비어있는 딱지 모양도 만들수 있다..!

See the Pen button style by JEONG (@cona) on CodePen.

[참고]