CSS border로 삼각형 그리기

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.

 

 

 

[참고]

https://css-tricks.com/snippets/css/css-triangle/