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

评论

1 楼 蕃薯耀 2016-07-27  

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

>>>>>>>.
蕃薯耀