纯CSS实现对话框的效果

<style>
#word{
	width:500px;
	height:100px;
	background-color:#f3961c;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	position:relative;
}
#word span{
	color:#f3961c;
	font-size:54px;
	position:absolute;
	top:50px;
}
</style>
	
<div id="word">  
	<span>◆</span>
	字符法尖角对话框
</div>
	
	

	
<style>
#border{
	width:500px;
	height:100px;
	line-height:100px;
	background-color:#ff3300;
	text-indent:50px;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	position:relative;
}
#border span{
	width:0px;
	height:0px;
	border-width:20px;
	border-style:solid dashed dashed dashed;
	border-color:#ff3300 transparent transparent transparent;
	position:absolute;
	top:100px;
	left:50px;
}
</style>

<div id="border">
	<span></span>
	border实现尖角对话框
</div>
	
	

	
<style>
#border1{
	width:500px;
	height:100px;
	background-color:#ff3300;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	position:relative;
}
#border1 span{
	width:0;
	height:0;
	border-width:30px 10px;
	border-style:solid dashed dashed dashed;
	border-color:#ff3300 transparent transparent transparent;
	position:absolute;
	top:100px;
	left:50px;
	overflow:hidden;
	font-size:0;
}
</style>

<div id="border1">
	<span></span>
	border实现长尖角对话框
</div>
	
	

<style>	
#border2{
	width:500px;
	height:100px;
	background-color:#ff3300;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	position:relative;
}
#border2 span{
	width:0;
	height:0;
	border-width:20px 10px;
	border-style:solid dashed dashed solid;
	border-color:#ff3300 transparent transparent #ff3300;
	position:absolute;
	top:100px;
	left:50px;
	overflow:hidden;
	font-size:0;
}
</style>
	
<div id="border2">
	<span>

<style>	
#border3{
	width:500px;
	height:100px;
	background-color:#ff3300;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	position:relative;
}
span{
	overflow:hidden;
	font-size:0;
}
#border3 .one{
	width:0;
	height:0;
	border-width:24px;
	border-style:dashed solid solid dashed;
	border-color:transparent #ff3300 #ff3300 transparent;
	position:absolute;
	top:50px;
	left:-48px;
}
#border3 .two{
	width:0;
	height:0;
	border-width:10px 24px;
	border-style:dashed solid solid dashed;
	border-color:transparent #fff #fff transparent;
	position:absolute;
	top:78px;
	left:-48px;
}
</style>
	
<div id="border3">
	<span class="one"></span>
	<span class="two"></span>
	border实现斜边角尖角对话框
</div>
	
	

	
<style>	
#border4{
	width:500px;
	height:100px;
	background-color:#fff;
	border:10px solid #ff3300;
	position:relative;
}
span{
	overflow:hidden;
	font-size:0;
}
#border4 .one{
	width:0;
	height:0;
	border-width:20px;
	border-style:solid dashed dashed dashed;
	border-color:#ff3300 transparent transparent transparent;
	position:absolute;
	top:110px;
	left:50px;
}
#border4 .two{
	width:0;
	height:0;
	border-width:20px;
	border-style:solid dashed dashed dashed;
	border-color:#fff transparent transparent transparent;
	position:absolute;
	top:100px;
	left:50px;
}
</style>

<div id="border4">
	<span class="one"></span>
	<span class="two"></span>
	border实现空边角尖角对话框
</div>
	
	

	
<style>
#border5{
	width:300px;
	height:100px;
	line-height:100px;
	text-indent:0;
	text-align:center;
	background-color:#ff3300;
	border-radius:100px;
	-webkit-radius:100px;
	-moz-radius:100px;
	position:relative;
}
#border5 span{
	background-color:#ff3300;
	border-radius:30px;
	-webkit-radius:30px;
	-moz-radius:30px;
}
#border5 .one{
	width:30px;
	height:30px;
	position:absolute;
	top:120px;
	left:10px;
}
#border5 .two{
	width:15px;
	height:15px;
	position:absolute;
	top:160px;
	left:0px;
}
</style>	

<div id="border5">
	<span class="one"></span>
	<span class="two"></span>
	border-radius实现气球对话框
</div>