[摘录]纯CSS打造箭头对话框效果

有在使用Facebook的朋友，应该会发现到，自从Facebook将条列式改成时间轴的架构后，每当发表新讯息时，每个讯息都会像对框话的形式来呈现，虽然说这不是什么新技术，但先前梅干都是将那对话框的，三角形制作成图档，再将它定位显示到该显示的任置，虽然说没什么问题，但若中间突然修改的颜色或边框时，这下就得重新再绘制一次，因此梅干便在想，或许可用Html5来绘制那三角形，如此一来就可省去，每当色彩改变时，重制的麻烦，但就目前Html5的部分，使用上还是相当的受限，因此梅干爬了一些文章，找到一个相当棒的作法，竟然直接用CSS的语法就可实作出来，这还真是让梅干想都没想到，竟然可以这样子用，而梅干也花了点时间，将对话框四个上向箭头的CSS给设定好了，因此各位可以直接套用喔！

 

 

首先，先定义一个边框的样式与色彩。

 

由于边框是由内向外画，且会看到个边的接角，正好都是45度角。

 

接着再将宽、高设成0。