css打造简约聊天气泡，轻松实现三角箭头
问题：
经典的聊天气泡状，如何使用 css 绘制出绿色的气泡和指向特定位置的三角箭头呢？
实现方法：
立即学习“前端免费学习笔记（深入）”；
使用提前预设的 4 个位置，再通过属性选择器匹配即可。以默认居右为例：
这里是文字内容这里是文字内容这里是文字内容这里是文字内容这里是文字内容
div {
min-width: 100px;
min-height: 30px;
line-height: 30px;
background: #93ec69;
padding: 0 10px;
border-radius: 4px;
margin: 10px;
display: inline-block;
position: relative;
}
div:before {
content: '';
width: 8px;
height: 8px;
background: #93ec69;
display: block;
position: absolute;
right: 0;
top: 50%;
transform: translate(50%, -50%) rotate(45deg);
}
div[position="top"]:before {
top: 0;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
div[position="bottom"]:before {
top: 100%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
div[position="right"]:before {
right: 0;
top: 50%;
transform: translate(50%, -50%) rotate(45deg);
}
div[position="left"]:before {
top: 50%;
left: 0;
transform: translate(-50%, -50%) rotate(45deg);
} 
