css 用border实现三角形

border.css

.message-box { 
    position:relative;   
    width:240px; 
    height:60px; 
    line-height:60px; 
    background:#E9FBE4; 
    box-shadow:1px 2px 3px #E9FBE4; 
    border:1px solid #C9E9C0; 
    border-radius:4px; 
    text-align:center; 
    color:#0C7823; 
}
.triangle-border { 
    position:absolute; 
    left:30px; 
    overflow:hidden; 
    width:0; 
    height:0; 
    border-width:10px; 
    border-style:solid dashed dashed dashed; 
}
.tb-background { 
    bottom:-20px; 
    border-color:#C9E9C0 transparent transparent transparent; 
}
.tb-border { 
    bottom:-19px; 
    border-color:#E9FBE4 transparent transparent transparent; 
}

border.html

<div class="message-box">
  <span>border 属性实现</span>
  <div class="triangle-border tb-background"></div>
  <div class="triangle-border tb-border"></div>
</div>