用css的border属性实现三角 by 渔人码头
http://www.css88.com/archives/1875
Tip中小三角的实现 by 渔人码头
http://www.css88.com/archives/3904
Tip中的指示箭头实现 by 渔人码头
http://www.css88.com/archives/4557
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <style type="text/css"> .tips{ position:absolute; padding:10px; border:1px solid #ffba00; background:#fff8e8; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} .diamond{ position:absolute; display:block; width:8px; height:8px; font-size:0; background:#fff8ef; -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')"; filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand'); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg);} :root .diamond{ filter:none\9;}/*ie9 hack*/ .tips-top{ border-left:1px solid #ffba00; border-top:1px solid #ffba00; top:-5px; top:-6px\9; _top:-7px; left:10px;} .tips-bottom{ border-right:1px solid #ffba00; border-bottom:1px solid #ffba00; bottom:-5px; bottom:-6px\9; _bottom:-7px; left:10px;} .tips-left{ border-left:1px solid #ffba00; border-bottom:1px solid #ffba00; left:-5px; left:-6px\9; _left:-7px; top:10px;} .tips-right{ border-right:1px solid #ffba00; border-top:1px solid #ffba00; right:-5px; right:-6px\9; _right:-7px; top:10px;} </style> <div class="tips"> <div class="tips-text"> Lorem ipsum dolor sit amet. </div> <div class="tips-top diamond"></div> <div class="tips-bottom diamond"></div> <div class="tips-left diamond"></div> <div class="tips-right diamond"></div> </div> </body> </html>