message_box

消息框下面有三角行，带背景色和边框。

by yu lemon

HTML

<div>
<span class="text">你好呀</span>
<span class="triangle border"></span>
<span class="triangle bg"></span>
</div>

CSS

* {
  margin:0px;
  padding:0px;
}
div {
  display:inline-block;
  position:relative;
  width:300px;
  height:60px;
  background-color:#fff;
  border:1px solid #C6CCDC;
  border-radius:6px;
  text-align:center;
}
.text {
  display:inline-block;
  padding:15px;
}
.triangle {
  position:absolute;
  left:50%;
  margin-left:-10px;
  width:0px;
  height:0px;
  border-width:10px;
  border-style:solid dashed dashed dashed
}
.border {
  border-color:#C6CCDC transparent  transparent transparent;
  bottom: -20px;  
}
.bg {
  border-color:#fff transparent  transparent transparent;
  bottom: -19px;  
}