CSS3实现三角框

CSS代码：

.message-box {
    position:relative;
    width:100%;
    height:70%;
    line-height:60px;
    background:#f9f9f9;
    box-shadow:1px 2px 3px #FFF;
    border:1px solid #ddd;
    text-align:center;
    color:#F90;
}
.triangle-css3 {
    position:absolute;
    bottom:-8px;
    bottom:-7px;
    left:30px;
    overflow:hidden;
    width:13px;
    height:13px;
    background:#f9f9f9;
    border-top:1px solid #ddd;
    border-left:1px solid #ddd;
}
.transform {
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

 

html代码：

<div class="message-box">
  <span>文本内容</span>
  <div class="triangle-css3 transform"></div>
</div>