CSS现尖角对话框或带尖角的导航

CSS现尖角对话框或带尖角的导航

最近在设计管理系统前端的信息显示。因为看到很多UI设计的信息显示都由带尖角的对话框组成，所以我也想试试手。浏览一些网上的资料之后，大概明白了怎么回事。

尖角对话框的难度在于那个吐出来的尖角，这个效果具体的实现方法有很多。最容易想到的是用图片来实现，这方法最初我也想到了，但是一想到图片所占用的服务器空间，我就否定了这个思路。经过一段时间的查询我发现还有两种思路。1.使用纯CSS实现。2.使用字符来实现。
由于使用字符在不同浏览器显示效果不同，所以我选择使用CSS实现。基本原理是：先添加一个span块或div块，样式长和宽设置为0。设置boder,只将需要的方向的颜色设置成和父div一样的颜色，其他方向设置为inherit。当然position要设置为absolute,要点是计算块所在的位置。

CSS代码如下：

 .messageDetails em
   {
      width:0; 
      height:0; 
      font-size:0; 
      border-width:8px; 
      border-style:solid; 
      border-color:transparent white transparent transparent; 
      _border-color:white #f3961c white white; 
      overflow:hidden; 
      position:absolute; 
      top:17px;
      left:-16px;
      font-size:0; line-height:0;
   } 


   .org_bot_cor{
    width:0; 
    height:0; 
    font-size:0; 
    border-width:10px; 
    border-style:solid; 
    border-color:transparent hsla(182, 74%, 43%, 0.6) transparent transparent; 
    _border-color:white #f3961c white white; 
    overflow:hidden; 
    position:absolute; 
    top:15px;
    left:-21px;
    line-height:0;
   }

HTML代码如下：

  <div class="messageDetails" >

                <span class="org_bot_cor"></span>
                <em></em>
  </div>

效果：

(这里用了两个块重叠为了达到外侧的蓝色边框效果)