純程式碼無圖片Tips實現過程，代碼圖片tips實現
前些日子，用百度的時候發現了一個tips效果，感覺不錯，就手殘的按了F12，看了一下實現過程，剛開始的時候發現很神奇，即沒使用圖片，也沒使用“◇”符號，當然也沒有css3的元素。
先看下效果：
查看並不停的嘗試，終於知道怎麼實現的了
首先是最重要的實現部分：
.arrows { position:absolute; display:block; width:0; height:0; border:8px solid #999999;}實現的樣式如，左面的樣式
最有意思的是，border的上下左右的組成方式，如右側。如果我們只保留bottom是不是就可以組成一個三角箭頭了，另外我們發現在IE中將左上右的border樣式設定為點劃線，即可隱藏掉左上右部分。
.arrows { position:absolute; display:block; width:0; height:0; border:8px solid #999999; border-style:dashed dashed solid dashed;}(⊙o⊙)哦，忘了件事，IE中css的預設屬性，我們來reset掉。
.arrows { position:absolute; display:block; width:0; height:0; border:8px solid #999999; border-style:dashed dashed solid dashed; line-height:0; /*reset ie*/ font-size:0; /*reset ie*/}就這樣IE裡的三角箭頭就華麗麗的完成了，在Firefox、Google中還是不行，我們繼續改：
.arrows { position:absolute; display:block; width:0; height:0; border:8px solid transparent; border-style:dashed dashed solid dashed; border-bottom-color:#999999; line-height:0; font-size:0;}就這樣，三角箭頭就華麗麗的相容了瀏覽器。至於最終怎麼實現，看圖：
只要使用絕對位置做一個重疊，就可以了。
最後測試代碼：
<!doctype html><html><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style type="text/css"> .arrows {position:absolute;display:block;width:0;height:0;border:8px solid transparent;border-style:dashed dashed solid dashed;border-bottom-color:#999999;line-height:0;font-size:0;} /* Arrow's BaseStyle */ em.arrows {top:-8px;left:20px;} ins.arrows {top:-7px;left:20px;border-bottom-color:#ffffff;} .tips {position:relative;padding-top:8px;width:300px;} .tips-body {border:1px solid #999999;} .content {padding:0 5px;font-size:12px;line-height:24px;font-family:"Microsoft Yahei";color:#666666;} </style> <title>what's tips happend</title></head><body> <div class="tips"> <em class="arrows"></em> <ins class="arrows"></ins> <div class="tips-body"> <p class="content">這裡是內容，內容的樣式會在這裡定義的，好吧，今天就到這裡吧!</p> </div> </div></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
