純CSS製作冒泡提示框

阿新 • • 發佈：2019-01-17

在此基礎上，今天分享一篇文章給大家，如果利用CSS製作冒泡提示框。

先看2張效果圖：

CSS：

/*
   對話氣泡
   用法：使用.speech-bubble和.speech-bubble-DIRECTION類
   <div class="speech-bubble speech-bubble-top">Hi there</div>
*/
 
.speech-bubble {
  position: relative;
  background-color: #292929;
 
  width: 200px;
  height: 150px;
  line-height 
: 150px; /* 垂直居中 */
  color: white;
  text-align: center;
  border-radius: 10px;
  font-family: sans-serif;
}
 
.speech-bubble:after {
  content: '';
  position: absolute;
 
  width: 0;
  height: 0;
 
  border: 15px solid;
}
 
/* 箭頭的位置 */
.speech-bubble-top:after {
  border-bottom-color: #292929;
  left: 50%; 

  bottom: 100%;
  margin-left: -15px;  
}
.speech-bubble-right:after {
  border-left-color: #292929;
 
  left: 100%;
  top: 50%;
  margin-top: -15px;   
}
 
.speech-bubble-bottom:after {
  border-top-color: #292929;
  top: 100%;
  left: 50%;
  margin-left: -15px;  
}
 
.speech-bubble-left:after {
  border-right 
-color: #292929;
  top: 50%;
  right: 100%;
  margin-top: -15px;   
}

HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="maopao.css">
        <title>Test</title>
    </head>
    <body>
        <div class="speech-bubble speech-bubble-top">
            箭頭在頂部
        </div>
         <br/>
        <div class="speech-bubble speech-bubble-bottom">
            箭頭在底部
        </div>
        <br/>
        <div class="speech-bubble speech-bubble-left">
            箭頭在左側
        </div>
         <br/>
        <div class="speech-bubble speech-bubble-right">
            箭頭在右側
        </div>
    </body>
</html>

純CSS製作冒泡提示框

在此基礎上，今天分享一篇文章給大家，如果利用CSS製作冒泡提示框。先看2張效果圖： CSS： /* 對話氣泡用法：使用.speech-bubble和.speech-bubb

css製作tips提示框，氣泡框，製作三角形

有時候我們的頁面會需要這樣的一些提示框或者叫氣泡框，運用css，我們可以實現這樣的效果。為了實現上面的效果，我們首先要理解如何製作三角形。當我們給一個DIV不同顏色的邊框的時候，我們可以得到下面的效果。 .triangle{ border-top

純CSS製作圓角矩形框知識總結

在製作後臺登入頁的時候，需要從網頁上面把那個圓角矩形框選取下來，然後通過Photoshop進行切割，在進行設定，最後得到需要的登入框的圓角矩形框。如下圖。但是登入最新的智囊團的那個登入頁面的時候，上面的那個圓角矩形框已經沒有了，最新的登陸頁面跟QQ郵箱登

【2048小遊戲】——CSS/原生js爬坑之純CSS模態對話框&遊戲結束

函數一半窗口內容 href 標準 tex true 存儲空間引言：2048小遊戲的結束界面，使用純CSS制作模態對話框，一般做模態對話框都會使用BootStrap自帶的模態對話框組件方便使用，但在制作要運行在移動端的小項目時，就不能使用BootStrap，因為文件太

純css製作導航下拉選單

轉載文章，覺得作者思路很好 <nav> <ul>

純CSS製作各種各樣的網頁圖示（三角形、暫停按鈕、下載箭頭、加號等）

三角形 ? 1 2 3 4 5 6 7 8 9 10 11 <div class="box"></div> <style> .box{ &

純CSS製作滑動切換開關

效果演示：程式碼部分： <input type="checkbox" class="toggle"> <div class="inner"> </div> body{ margin:0; height:100

前端學習筆記（四）--CSS控制UL LI 的樣式詳解(推薦)及純CSS製作各種各樣的網頁圖示（三角形、暫停按鈕、下載箭頭、加號等）

DIV+CSS裡，我們用得最多的就是ul li來顯示資料，如新聞按鈕等。下面給大家一個css ul li的例子供學習<div id="menu"> <ul> <li><a href="#">首頁</a></

web前端小案例-純css製作水滴效果

html程式碼：<div class="drip"></div>css程式碼： <style> html, body { margin: 0; height: 100%; width: 100%; display: flex; background-c

純CSS調整select選擇框高度，相容IE/Firefox/Opera/Safair/Chrome

在IE下直接用height、border定義select沒有效果，目前大部分情況都是用js進行模擬，其實css也是可以做得到的，原理很簡單，隱藏select選擇框的原生邊框，再用其他元素模擬內邊距及邊框就OK了。首先看一下預設的select在各個瀏覽器的表現情況。

使用純CSS製作展開合併立方體特效

顯示效果原始碼 <html> <head> <meta http-equiv="Content-Type" content="text/html; chars

純css製作旋轉圖片

看到一個不錯的網站上製作了一個可以360旋轉的圖片，感覺效果不錯，於是就自己用css製作了一個，效果圖如下：具體實現程式碼如下： <!DOCTYPE html>

純css製作三級下拉選單

css本身的功能就挺強大的，尤其是css3出來之後，大部分特效只用css3就能完成了，無需再費心思去想js怎麼怎麼做jQuery怎麼怎麼做，程式碼簡潔質量輕巧。下面是本人用純css製作的三級下拉選單效果：思路很簡單，三級選單直接用三層巢狀的ul佈局：

純css製作彩色圓環彈跳效果

這個效果是由185行純css程式碼製作，佈局相對簡單，有正在學習前端基礎的小夥伴可以用來練習一下，現在越來越多的企業重視起基礎知識了，所以有要找工作的小夥伴和正在找工作的小夥伴記得多練習基礎的知識，把基礎練紮實哦。文章分享之前小編推薦一下我的前端學習群：575308719，裡面都是學習前端的，如果你想

純CSS實現帶小三角的提示框

最終效果大概如下：主要實現的思路：將提示框分為兩個部分，一個是方形的主題，一個是鏤空的三角形。所以html大體的結構應該如下： <div class="tips"> &

DIV+CSS製作帶箭頭提示框

帶箭頭樣式的提示框，在很多的網站上都能見到這樣的效果。通過自己動手寫出來，覺得也不是什麼難事。其實這個效果都是通過CSS中一個border樣式就能做出來。歸納一下實現這個效果主要會用到border的這幾個樣式： border-style:邊框的樣式 border-color

純CSS實現提示框小三角

注：IE6不支援邊框transparent，當設定成透明時顯示為黑色。而當border-style為dotted或dashed時，點線與虛線均以邊框寬度為基準，點線長度必須是其寬度的3倍以上（height>=border-width*3），虛線寬長度必須是其寬度的5倍

純css三角提示框，兼容IE8

ble nor 兼容 ima tab osi after splay table 利用border屬性實現 .messageBox{ position: relative; width: 240px;

純css實現select下拉框並排顯示

code 同時 eight spl one 背景色不起作用表單 lang <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

偽類target實現純css模態框

content charset text and title html overlay see sca 今天看到一個純css模態框，覺得是很牛呀看了下用了target偽類，一直不知道有這麽神奇的偽類。。用法是這樣的，給模態框一個id， <div id="po

純CSS製作冒泡提示框

相關推薦