菱形实现气泡Bubble，菱形画箭头，菱形画三角形

菱形实现气泡Bubble，菱形画箭头，菱形画三角形

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2016年7月27日 16:32:44 星期三
http://fanshuyao.iteye.com/
一、菱形实现气泡Bubble，效果如下：



二、实现原理：

1、使用2个◆覆盖叠加实现。

2、页面代码：

<div class="mt15">
<div class="bold">菱形实现气泡Bubble</div>
<div class="bubble">
<em>◆</em><span>◆</span>
<div>气泡在此！！气泡在此！！气泡在此！！气泡在此！！气泡在此！！气泡在此！！气泡在此！！气泡在此！！</div>
</div>
</div>

3、css样式：

<style>
<!--

.bubble {
font-size: 14px;
width: 300px;
height: 90px;
padding: 5px 10px;
border: 2px solid #0099FF;
position: relative;
}

.bubble div{
position: relative;
}
.bubble em, .bubble span{
display: block;
font-size: 50px;
line-height: 50px;
width: 50px;
font-family: SimSun;
font-style: normal;
font-weight: normal;
text-align: center;
vertical-align: middle;
position: absolute;
left: 200px;
}

.bubble em {
/* border-width: 22px;
border-color: #0099FF transparent transparent transparent;
left:-22px; */
color: #0099FF;
bottom: -27px;
}

.bubble span {
/* border-color: #FFF transparent transparent transparent; */
color: #fff;
bottom: -24px;
}
-->
</style>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2016年7月27日 16:32:44 星期三
http://fanshuyao.iteye.com/