CSS 삼각형이 만들어지는 과정

질문 : CSS 삼각형은 어떻게 작동합니까?

---

CSS Tricks-Shapes of CSS 에는 다양한 CSS 모양이 많이 있으며 특히 삼각형이 궁금합니다.

 

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

<div id="triangle-up"></div>

어떻게 그리고 왜 작동합니까?

답변

---

alex가 말했듯 이 동일한 너비의 테두리는 45도 각도로 서로 맞대어 있습니다.

상단 테두리가없는 경우 다음과 같이 표시됩니다.

그런 다음 너비를 0으로 지정합니다.

... 그리고 높이 0 ...

... 그리고 마지막으로 두 개의 측면 테두리를 투명하게 만듭니다.

그 결과 삼각형이 생깁니다.

출처 : https://stackoverflow.com/questions/7073484/how-do-css-triangles-work