效果

html结构

<div class="tool-tip-wrapper"> <div class="tool-tip"> 使用border写的三角形 <div class="tip-arrowDown-shadow"></div> <div class="tip-arrowDown"></div> </div> </div>

css代码

.tool-tip-wrapper{position: relative;left: 200px;top: 200px} .tool-tip{ position:absolute; left:-40px; top:-14px; padding:6px 12px; font-size:12px; line-height:1; text-decoration:none; text-align:center; text-shadow:0 0 1px white; white-space:nowrap; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background-color:#f9f2ba; border:1px solid #e9d315; color:#5b5316; } .tool-tip .tip-arrowDown-shadow, .tool-tip .tip-arrowDown{ position:absolute; left:90%; bottom:-12px; margin-left:-6px;

width:0;height:0;line-height: 0;border-width:6px;border-style:solid dashed dashed dashed;border-color:#e9d315 transparent transparent transparent;

} .tool-tip .tip-arrowDown{ border-top-color:#f9f2ba; } .tool-tip .tip-arrowDown-shadow{ border-width:7px !important; bottom:-14px; margin-left:-7px; }