CSS만 가지고 삼각형을 만드는 것은 불가능하다고 생각했었는데, 정말 기발한 방법이 있더군요~
말풍선을 만들 때 사용하면 상당히 많은 도움이 될 것 같습니다.
<div
style="border-color: red transparent transparent transparent;
border-width:20px;
border-style:solid;
width:0px;height:0px;"></div>
위의 코드대로 작성하면 빨간 삼각형이 생깁니다.
다양한 곳에 응용이 가능할 것 같네요~
참고: [http://jonrohan.me/guide/css/creating-triangles-in-css/]
그런데, 또 다른 방법이 있습니다. 엄밀히 삼각형은 아니지만, 다른 box 요소와 붙이면 말풍선을 만들 수는 있을 것 같아요~
<div style="background-color:red;width:10px;height:10px;transform:rotate(45deg);"></div>
그냥 45도 기울이는 건데요~
단점이 있다면, 삼각형이 아니라 마름모꼴이라는 것! 그리고 IE8에서는 작동하지 않는 다는 점이구요~
장점이 있다면, 그림자를 적용할 수 있다는 것 입니다.
