純CSS製作一個簡單氣泡對話框（圖文詳解）

這篇文章給大家一步步介紹使用純CSS製作簡單氣泡對話框的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

用氣泡框圖片直接插入即可，但是，圖片每次都需要加載，可以用CSS來實現！

首先，我得弄清楚，氣泡框是怎麼實現的。知道了原理之後就可以無限變通啦！ ！ ！ ！

先來一個基本的氣泡框圖！

第一步，首先要有個方塊！很簡單，一個div就可以囉！然後對其div設定相對定位。

HTML：

	<div class="div"></div>

CSS:

.div{
    width: 200px;
    height: 100px;
    border: 2px solid #ff0;
    position: relative;
	}

如圖，這是一個框，基本的形狀就有啦！

接著，最關鍵的，就是如何實現三角形部分啦~

在先前得搞明白，三角形是怎麼來的？

在這裡，我先舉一個例子，來解析一下！ ！ ！ ！

來看看下圖。一步一步來！ ！ ！

HTML:

<p>1.下面是一个div.长宽为50*50的正方形，边框宽度为50</p>
<div class="div1"></div>

CSS:

		.div1{
			width: 50px;
			height: 50px;
			border: 50px solid;
			border-color: yellow skyblue pink deeppink;
		}

效果圖：我們可以看到邊框為50px的時候，已經呈現梯形了對不對？

接下來，把正方形的寬高都設為0，只剩下50px的邊框，我們來看看效果圖，是不是出現了四個三角形？是的，邊框已經沒有再包裝任何東西了。只剩下邊框它本身了。

我們取上邊框，剩下的三邊都顏色設為透明！

是不是知道三角形從何而來了呢？

我們回到氣泡框，只要要把三角形定位到長方形的框框下面，氣泡框就基本上成型啦！ ！

CSS：在div之前插入此樣式！用::before 就ok!!!  對其絕對定位！把上邊框顏色設為：#ff0，左右邊框為透明色，下邊框為透明色

		.div::before{
			content: '';
			width: 0;
			height: 0;
			border: 20px solid;
			position: absolute;
			bottom: -40px;
			left: 140px;
			border-color:  #ff0 transparent transparent;
		}

結果圖：

好了，大概的樣子有了，咦！ ！ ！是不是還差一點點呢？喔！原來三角形處應該是空心的，而非實心三角形呀！ ！那麼，在div元素之後插入一個同樣的三角形，背景色為白色，蓋在原有的黃色三角形不就可以了麼？好的，來看看！ ！ ！

CSS:

		.div::after{
			content: '';
			width: 0;
			height: 0;
			border: 20px solid;
			position: absolute;
			bottom: -36px;
			left: 140px;
			border-color:  #fff transparent transparent;
		}

效果圖：

# 完成之後，是不是有點突兀，再給氣泡框加個圓角把！ ！ ！

css:

.div{
			width: 200px;
			height: 100px;
			border: 2px  solid #ff0;
			border-radius: 7px;  /*圆角弧度为7px*/
			position: relative;
		}

 也可以自己設定一個有填滿色的氣泡框！ ！ ！很簡單，就不上程式碼啦！ ！

好啦，大功告成啦！一個基本的氣泡框，就已經完成囉！ ！ ！ ！

更多程式相關知識，請造訪：程式設計教學！ ！

以上是純CSS製作一個簡單氣泡對話框（圖文詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！