是的，我们即将实现的就是以上功能，是不是很生动？

贴上HTML:

div class='poptip '

span class=' pop tip-arrow pop tip-arrow-top ' em/EMI/I/span

span class=' pop tip-arrow pop tip-arrow-right ' em/EMI/I/span

span class=' pop tip-arrow pop tip-arrow-bottom ' em/EMI/I/span

span class=' pop tip-arrow pop tip-arrow-left ' em/EMI/I/span

嗨，知道吗？英国铁路公司大前端D7主题很快就疯抢了！

/div

以上超文本标记语言构成了一个浮出层和四个方向的尖角，其实你只需要其中的一个跨度标签，所以真正用上的代码并没那么多。

贴上CSS:

/* poptip */。pop tip { position : absolutetop : 20 pxleft :20 pxpadding : 6px 10px 5px * padd : 7px 10px 4px线高： 16pxcolor : # db7c 22 font-size : 12px；背景色-: # FFFCEF；border : solid 1px # ffbb 76 border-radius : 2px；box-shadow : 0 3px # DDD；}。pop tip-arrow {位置：；隐藏飞越：字体样式： normalfont-family : simsunfont-size : 12px文字-阴影：0 0 2px # CCC}。poptip-arrow em .弹出提示-箭头I {位置：；left :0 top :0 font-style : normal；}。pop tip-arrow em { color : # FFBB 76；}。pop tip-arrow I { color : # FFFCEF；文本-阴影：无；}。poptip-arrow-top .pop tip-arrow-bottom { height : 6px；宽度： 12pxleft:12px边距-左侧：-6px；}。流行提示-箭头-左，pop tip-arrow-right { height : 12px；宽度： 6pxtop : 12pxmargin-top :-6px；}。pop tip-arrow-top { top :-6px；}。pop tip-arrow-top em { top :-1px；}。pop tip-arrow-top I { top : 0 px；}。pop tip-arrow-bottom { bottom :-6px；}。pop tip-arrow-bottom em { top :-8px；}。pop tip-arrow-bottom I { top :-9px；}。pop tip-arrow-left { left :-6px；}。pop tip-arrow-left em { left :1 px；}。pop tip-arrow-left I { left :2 px；}。pop tip-arrow-right { right :-6px；}。pop tip-arrow-right em { left :-6px；}。pop tip-arrow-right I { left :-7px；}

这段半铸钢钢性铸铁(铸造半钢)写的已经很简练了，所以不要嫌多，因为它具有很强的扩展性。

如果你希望尖角居中显示，可以在爆音提示-箭头这个跨度上加上style='left:50% '或者style='top:50% '

这个代码兼容IE6-10、Chrome、Firefox等基本上所有主流浏览器，所以不必担心其兼容性和实用性。据悉，支付宝等站点采用的也是此方式。