<style type="text/css">
.triangle{
position:absolute
left:2px
top:24px
width:0
height:0
border-right:16px #ededed solid
border-left:none
border-top:8px rgba(0, 0, 0, 0) solid
border-bottom:8px rgba(0, 0, 0, 0) solid
z-index:1002
}
.paopao{
position:absolute
left:16px
top:8px
width:512px
height:101px
background-color: #ededed
border:1px #d5d5d5 solid
border-radius:12px
box-shadow:inset 0 2px 2px rgba(255, 255, 255, 1), inset 0 -2px 2px rgba(0, 0, 0, 0.1)
z-index:1001
}
</style>
<div class="triangle"></div>
<div class="paopao"></div>
纯粹CSS实现的话，需要CSS3支持，也就是用Chrome、FireFox、IE9以上浏览器，效果如下：
<div class="send"><div class="arrow"></div>
</div>
<style type="text/css">
body {
background:#4D4948
}
.send {
position:relative
width:150px
height:35px
background:#F8C301
border-radius:5px /* 圆角 */
margin:30px auto 0
}
.send .arrow {
position:absolute
top:5px
right:-16px /* 圆角的位置需要细心调试哦 */
width:0
height:0
font-size:0
border:solid 8px
border-color:#4D4948 #4D4948 #4D4948 #F8C301
}
</style>
jQuery mobile 做一个泡泡框的实现方法：
思路:用jquery内置的SetBubblePopup方法形成泡泡即可。
核心代码：
//设置布局
$('#dummy2').SetBubblePopup({
innerHtml: '<p>Bubble Popup!</p>',
bubbleAlign: 'left',
tailAlign: 'left',
color: 'green',
contentStyle: 'font-size:16px'
})
//设定弹出第二个泡泡的样式和文字
jQuery().SetBubblePopup({
cssClass: [ ".myclass" ],
relAttribute: [ "nofollow" ],
innerHtml: '<p>another Bubble Popup!</p>',
bubbleAlign: 'right',
tailAlign: 'right',
color: 'violet',
contentStyle: 'color:#CC0066font-family:Arialfont-size:11pxfont-weight:bold'
})
效果如下：
