css模擬小氣泡三角(二)

2022-05-27 04:21:07 字數 465 閱讀 2413

1

.down_tip

15.down_tip:after

看我沒有用啊,你相信嗎?

這個是用after偽類實現的,在div後面新增內容content:'.',然後模擬小氣泡的

這個效果我只在現代瀏覽器裡面實現。

需要介紹幾個地方:

1.ie9寫這麼多相容。。。是啊,我也不想,這麼一大坨是用來解決,在ie9下面border-radius和背景漸變色不能共存的bug,我原以為ie9沒bug啦,沒想到這麼多,這個我是記不住的,所以借助乙個神器:

,下面有個ie sup.port勾選就可以啦

2.這裡我實現小三角是用三邊來實現的,原理呢就是:乙個矩形可以是有四個三角拼成,也可以又三個三角拼成,理解不了的自己畫一下就ok啦。

參考資料:

用純css模擬小氣泡三角

以前遇到textarea上面有小三角氣泡,總是把小三角氣泡單獨切下來,然後再絕對定位上去。今天,切頁面我就換了乙個方法,用純css上!其實原理很簡單 就是讓兩個小三角疊起來,上面的小三角往一側錯一下位,就剛好露出下面小三角的邊,為此上下三角的顏色是不同的,而且需要上面的小三角蓋住下面的三角。所以,上...

Jquery結合css 實現小氣泡效果

效果就是個滑鼠hover上去的時候,浮出乙個氣泡 上面有其他選單 氣泡的div 語文數學 物理化學 語文數學 物理化學 語文數學 物理化學 兩種實現方式 1.用js控制氣泡的座標 思路 先把氣泡的div部分寫在body裡面,然後隱藏起來 然後滑鼠hover事件觸發的時候,ajax去後台取資料,插入到...

CSS3 仿微信聊天小氣泡

今天給大家分享乙個我剛做的專案中的乙個小案例,因為我們在做乙個聊天的功能,之前的聊天頁面ui很醜,我就不在這裡展示給大家了。頁面大致就是這個樣子,接下來我們來一起學習製作步驟吧。divclass leftd spanng class leftd h imgng src img c pic.pn di...