網上也有很多的案例，這里也只是以自己的方法實現。 原理，還是比較簡單的。 只是半透明的那個案例，遇到了些問題，最終還是選擇避開問題的方法解決 ...

效果： 思路： 用css寫出來一個較大三角形（下圖中藍色），再寫一個小三角(紅)去遮蓋大三角 ，漏出尖的一部分 ==》 如果用CSS實現一個三角形呢？ 給一個元素四周都加上邊框的話， 形狀為： 生成一個三角形可以寫為： .box2 ...

前提：氣泡框或者提示框是網頁很常見的，實現它的方式有很多，我們以前最常用的就是切圖片 然后通過 "定位" 方式 定位到相應的位置，但是用這種方式維護很麻煩，比如設計師想改成另外一種或者另外一種顏色 那我們只有再次切圖片等。下面我們來學習下使用html+css來實現這種效果！ 如下效果 ...

在使用第三方框架bootstrap的時候，本以為其是圖片實現的小箭頭，后來使用開發工具查看是用CSS來實現的，現記錄如下： 之前都沒仔細去觀注過其原理，都是拿來使用，在實現小箭頭之前需要了解下CSS的before跟after偽類的用法，這個鏈接有詳細說明http://www.webhek.com ...

app中肯定是少不了與用戶交互的各種dialog,。 這里，總結了常用的9種dialog的實現方法。 除了popupwindow實現稍微麻煩一點，其他形似都相對簡單，熟悉2便即可 直接上源碼 package ...

在聊天的場景中，聊天內容需要用到氣泡修飾，如下圖。下面一一講解。 圖片式： 第一個樣式是京東客服，氣泡的圓角和鈎子都是用了圖片。使用了一個table組合成了一個圓角的框框。lm樣式拼出了鈎子。 樣式： View Code 背景式 ...

氣泡框（或者提示框）是網頁中一種很常見的元素，大多用來展示提示信息，如下圖所示： 拆分來看，形如這種氣泡框無外乎就是一個矩形框+一個指示方向的三角形小箭頭，要制作出這樣的氣泡框，如果解決了三角形小箭頭就容易了。一種方法就是制作這樣一個三角形箭頭的圖片，然后定位在矩形框上。但這種解決辦法在后 ...

氣泡框（或者提示框）是網頁中一種很常見的元素，大多用來展示提示信息，如下圖所示： 拆分來看，形如這種氣泡框無外乎就是一個矩形框+一個指示方向的三角形小箭頭，要制作出這樣的氣泡框，如果解決了三角形小箭頭就容易了。一種方法就是制作這樣一個三角形箭頭的圖片，然后定位在矩形框上。但這種解決辦法在后 ...