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