淺析新浪微博：以css實現的小三角提示框

分析新浪微博就會發現一個有趣的帶小三角提示框。先來看下效果圖：

 

仔細查看代碼才發現，並非使用傳統作法以圖片的background屬性實現，而是以兩個"◆"菱形字符實現，這個菱形支持 編碼有 GBK，gb312，UTF-8等，也可經過轉義字符&#9670輸入。

 

實現的原理是：em標籤裏得◆菱形符號做爲外三角邊框，而<span>標籤裏的◆菱形符號正好填充em，當兩個菱形符號重疊時，只需調整span裏的菱形往下移動1px，那麼就能呈現1px的向上三角邊框。

因爲新浪微博的特性，代碼並不容易提取。按照它的思路，我只好本身寫一次。

下面是html，爲了統一把em標籤換成span標籤。

<div class="comment">
   <div class="arrow">
      <span class="out">◆</span>
      <span class="inside">◆</span>
   </div>
         <p>帶小三角的提示框</p>
</div>

css代碼：

.comment{padding:10px;background:#fff; border-radius:3px;border:1px solid #e1e4e5;position:relative
      }
.arrow {_display:none;position:absolute;top:-9px;left:20px;overflow:hidden;display:block;
      }
.arrow .out{display:inline-block;overflow:hidden;color:#e1e4e5;
      }
.arrow .inside{top:1px;color:#fbfbfb;left:0px;position:absolute;
      }

爲何◆要定義字體？其目的經過字體屬性把它放大，也可經過span加上字體加粗font-weight:bold屬性再增大三角形邊框。明確了方法與原理，我麼就能夠在不一樣方向，不一樣位置放置三角形了。

以上所寫代碼可以兼容目前全部瀏覽器，包括IE6。貌似新浪微博的好像不兼容IE6哦，小得瑟一下，哈哈~~~~~~~~