css 三角的形成

?

html

<div class="mod-msg-bubble" id="mod-msg-bubble">
  <div class="bubble-icon-container">
      <div class="bubble-icon" style=""></div>
  </div>
</div>

css
.mod-msg-bubble {
	position: absolute;
	overflow: hidden;

	
	top: 431px;
	width: 368px;
	height: 128px;
	border:1px solid #99bbe8;
}


.bottom{
	border-top: 8px solid white;
	border-left: 8px dashed transparent;
	border-right: 8px dashed transparent;
	position: absolute;
}
.top{
	border-bottom: 8px solid white;
	border-left: 8px dashed transparent;
	border-right: 8px dashed transparent;
	position: absolute;
}
.left{
	border-right:8px solid white;
	border-top: 8px dashed transparent;
	border-bottom: 8px dashed transparent;
	position: absolute;
}
.right{
	border-left:8px solid white;
	border-top: 8px dashed transparent;
	border-bottom: 8px dashed transparent;
	position: absolute;
}
.mod-msg-bubble .bubble-icon-container .left {
	border-bottom: 8px solid white;
	border-left: 8px dashed transparent;
	border-right: 8px dashed transparent;
	position: absolute;
	top:20px;
	left:10px;

}