<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>带三角形尖头的提示框</title> <mce:style type="text/css"><!-- .inner {float:left; display: inline; margin: -2px 0 -3px 0; line-height: 20px; position: relative; padding: 0 18px 0 6px; zoom: 1; background-color: #FFFFE1; border: 1px solid #C6C6A8; color: #565656} .arr { background-image: url(http://email.163.com/index/images/j2_7.gif); /*这是张很大的图片,尖角只占其中的的一小块区域*/ background-repeat: no-repeat; position: absolute; top: -5px; left: 15px;width:9px; height: 5px; background-position: -397px -180px /*这个主要是为了显示图片的特定区域,尖角处*/ } .arr2 { background-image: url(jianjiao.jpg); /*这是我自己把那个尖角截图下来后的图片*/ background-repeat: no-repeat; position: absolute; top: -5px; left: 15px;width:9px; height: 5px } --></mce:style><style type="text/css" mce_bogus="1">.inner {float:left; display: inline; margin: -2px 0 -3px 0; line-height: 20px; position: relative; padding: 0 18px 0 6px; zoom: 1; background-color: #FFFFE1; border: 1px solid #C6C6A8; color: #565656} .arr { background-image: url(http://email.163.com/index/images/j2_7.gif); /*这是张很大的图片,尖角只占其中的的一小块区域*/ background-repeat: no-repeat; position: absolute; top: -5px; left: 15px;width:9px; height: 5px; background-position: -397px -180px /*这个主要是为了显示图片的特定区域,尖角处*/ } .arr2 { background-image: url(jianjiao.jpg); /*这是我自己把那个尖角截图下来后的图片*/ background-repeat: no-repeat; position: absolute; top: -5px; left: 15px;width:9px; height: 5px }</style> </head> <body> <div class="inner"> <!--原版--> <span class="arr"></span>手机号码也可登录,<a href="http://e.mail.163.com/mobilemail/home.do?from=email163" mce_href="http://e.mail.163.com/mobilemail/home.do?from=email163">免费激活</a> </div> <br /> <br /> <div class="inner"> <!--重做一个--> <span class="arr2"></span>手机号码也可登录,<a href="http://e.mail.163.com/mobilemail/home.do?from=email163" mce_href="http://e.mail.163.com/mobilemail/home.do?from=email163">免费激活</a> </div> </body> </html>