如何用CSS实现带三角箭头的气泡

<div class="note">
秀出我的气泡
</div>

.note {
width: 207px;
min-height: 40px;
border: solid 1px #EEEEEE;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.10);
border-radius: 2px;
background-color: #FFFFFF;
font-family: STHeitiSC-Light;
font-size: 12px;
color: #666666;
letter-spacing: 0.5px;
line-height: 12px;
}

.note:before {
content: '';
border-top: 9px solid transparent; /*方框上部分背景颜色为透明*/
border-bottom: 9px solid transparent; /*方框下部分背景为透明*/
border-left: 9px solid #EEEEEE; /*箭头背景颜色*/
position: absolute; /*绝对定位1*/
top: 10px; /*距离顶部位置偏移量2*/
right: -9px; /*距离左边位置偏移量3*/
}

.note:after {
content: '';
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 10px solid #FFFFFF; /*箭头背景颜色，覆盖前面的#eee颜色，使其颜色与整体颜色一致*/
position: absolute;
top: 10px;
right: -7px;
}