[CSS] 삼각형과 사각형을 활용한 말풍선 만들기 (테두리가 있는 툴팁)

Intro

삼각형과 사각형을 활용하여 말풍선을 만들어보려고 한다. 참고로 삼각형은 화살표로 쓰일 예정 🙂

How to implement

Html

<br />
<div class="container">
삼각형과 사각형을 활용한 말풍선 만들기
<br/>
(테두리가 있는 툴팁) 
</div>

CSS

.container {
    margin-left: 15px;
    width: 200px;
    background: pink;
    border: 1px solid #CAD5E0;
    padding: 4px;
    position: relative;
    min-height: 200px;
}

.container:after {
content: '';
display: block;
position: absolute;
top: 10px;
right:-7px;
width: 10px;
height: 10px; 
    background: pink;
    border-right:1px solid #CAD5E0;
    border-bottom:1px solid #CAD5E0;
 -moz-transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
}

Result

http://jsfiddle.net/4xv1okd8/1/