菱形实现气泡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/