用css实现云状提示框

经常会用到云状提示框，如图：

基本框架是这样，以三角在左侧为例：

<div class="container">
      <div class="content">提示内容</div>
      <s>
               <i></i>
      </s>
</div>

css样式是这样：

<style>
.container{
        position:absolute;
        left:100px;
        top:10px;
        height:160px;
        border:1px solid #ccc;
}
s{
        display:block;
        height:0px;      // 为了取出border中间的空隙
        width:0px;        // 为了取出border中间的空隙
        position:absolute;
        left:-20px;
        top:10px;
        border-width:10px;
        border-color:transparent black transparent transparent;
        font-size:0;    //为了清除ie6浏览器中上下不是三角形的情况
        line-height:0;  //为了清除ie6浏览器中上下不是三角形的情况
        border-style:dashed solid dashed dashed;
}
i{
       display:block;
       height:0px;
       width:0px;
       position:absolute;
       left:-10px;
       top:-10px;
       border-width:10px;
       border-color:transparent white transparent transparent;
       font-size:0;
       line-height:0;
       border-style:dashed solid dashed dashed;
}
</style>

基本思想是这样的：在一个大div的边侧浮动一个小三角，而小三角是通过一个正方形的border宽是正方的变长来使得正方形变成四个小三角，如图：

将其中三个小三角的背景色设置与背景相同就等同于将其去掉。而<s></s>就是生成四个三角形的正方形，<i></i>这是于<s></s>基本完全相同只是剩下的三角行的背景色为大背景色来覆盖最后剩下的三角形的里边的北京使其只剩下边，就是我们想要的形状