css實現的氣泡型提示框程式碼例項
分享一段程式碼例項,他實現了氣泡型的提示框效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { padding: 0; margin: 0; list-style: none; } .tag{ width:300px; height:100px; border:5px solid #09F; position:relative; background-color:#FFF; border-radius:15px; } .tag:before,.tag:after{ content:""; display:block; border-width:20px; position:absolute; bottom:-40px; left:100px; border-style:solid dashed dashed; border-color:#09F transparent transparent; font-size:0; line-height:0; } .tag:after{ bottom:-33px; border-color:#FFF transparent transparent; } </style> </head> <body> <div class="tag"></div> </body> </html>
上面的程式碼實現了我們的要求,核心是如何實現三角形箭頭,更多內容可以參閱相關閱讀。
相關閱讀:
(1).border-radius可以參閱CSS3 border-radius一章節。
(2).:before可以參閱CSS E:before/E::before一章節。
(3).三角形箭頭可以參閱:before和:after實現三角形效果一章節。
相關文章
- css3實現的氣泡效果程式碼例項CSSS3
- css氣泡對話方塊程式碼例項CSS
- css3實現的天氣型別圖示程式碼例項CSSS3型別
- css實現氣泡框效果CSS
- css實現梯形程式碼例項CSS
- css實現對聯程式碼例項CSS
- css實現的字串擷取程式碼例項CSS字串
- 純css實現的tab選項卡程式碼例項CSS
- css實現矩形切角效果程式碼例項CSS
- css3漂浮氣球效果程式碼例項CSSS3
- javascript實現的點選彈出刪除提示框程式碼例項JavaScript
- css3實現的折角效果程式碼例項CSSS3
- css實現的首字母下沉程式碼例項CSS
- css實現的div垂直居中效果程式碼例項CSS
- CSS實現的柱狀圖效果例項程式碼CSS
- CSS進階篇--CSS3實現氣泡效果CSSS3
- 巧用 CSS 動畫實現動態氣泡背景CSS動畫
- css實現圖片灰度效果程式碼例項CSS
- css實現半透明邊框程式碼例項CSS
- css實現的彎彎的月亮效果程式碼例項CSS
- css3實現tab選項卡程式碼例項CSSS3
- 使用純 CSS 實現超酷炫的粘性氣泡效果CSS
- css3實現的多重邊框程式碼例項CSSS3
- css3實現的打折卡效果程式碼例項CSSS3
- css實現的三列等高效果程式碼例項CSS
- css實現的div垂直水平居中程式碼例項CSS
- CSS3 實現的鐘表效果程式碼例項CSSS3
- css實現的div旋轉簡單程式碼例項CSS
- css3實現的進度條程式碼例項CSSS3
- CSS3實現的梯形圖案程式碼例項CSSS3
- css3實現的毛玻璃效果程式碼例項CSSS3
- css3實現的打字機效果程式碼例項CSSS3
- css3實現的圓角效果程式碼例項CSSS3
- css3實現的太極圖程式碼例項CSSS3
- 滑鼠懸浮出現tips提示框效果程式碼例項
- css模擬實現雙擊效果程式碼例項CSS
- css模擬實現雙擊事件程式碼例項CSS事件
- CSS實現div層半透明效果程式碼例項CSS