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

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

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

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

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

本人是一個前端的新手，記錄一下自己的成長過程，文章寫得內容都很low，希望能各位大牛看到后能指點一下文章和代碼的問題。 在做一個練手的項目，遇到一個很常用的場景：把鼠標放在頭像框上彈出一個氣泡，顯示更多內容。記錄一下實現這個功能的過程： 首先要解決的就是氣泡框的效果，這個很容易實現，設置 ...

先上代碼： 效果圖： 主要運用的是1.border 組成的直角三角形。2，before 和 after 偽元素 。3，z-index屬性 1. 將元素 ...

我分別用了算是兩種方法寫了實心對話框，和邊框對話框。具體方法如下 css代碼，箭頭方向被注釋，需要的可以直接粘貼試試 渲染頁面 ...