前提:氣泡框或者提示框是網(wǎng)頁(yè)很常見的,實(shí)現(xiàn)它的方式有很多,我們以前最常用的就是切圖片 然后通過 "定位" 方式 定位到相應(yīng)的位置,但是用這種方式維護(hù)很麻煩,比如設(shè)計(jì)師想改成另外一種或者另外一種顏色 那我們只有再次切圖片等。下面我們來學(xué)習(xí)下使用html+css來實(shí)現(xiàn)這種效果!
如下效果:
and
我們可以來分析下:要實(shí)現(xiàn)這種效果 無(wú)外乎就是一個(gè)矩形和一個(gè)小三角形 然后三角形定位上去就可以了,那么我們?cè)趺礃油ㄟ^css來制作小三角形呢?
一:首先我們來看看css border屬性,當(dāng)我們把一個(gè)div border-color設(shè)置成不同顏色時(shí)候,可以看到四邊都成了矩形了。
div class="demo">/div>.demo {width:50px;height:50px;border-width:50px;border-style:solid;border-color:#CCC #00F #933 #0C9;}
如圖:
如果我們繼續(xù)把div的寬度和高度設(shè)為0的話 那么四邊會(huì)成了三角形了。
.demo{width:0; height:0; border-width:50px; border-style:solid; border-color:#CCC #00F #933 #0C9;}
但是IE6下 上下是三角形 左右是矩形框:如下:
通過實(shí)驗(yàn)發(fā)現(xiàn)當(dāng)把div的font-size和line-height都設(shè)為0的時(shí)候,div的四邊在IE6下都能形成完美的三角形:代碼如下:
.demo{width:0; height:0; border-width:50px; border-style:solid; border-color:#CCC #00F #933 #0C9;line-height:0;font-size:0;}
很明白我們只需要一個(gè)三角形,那么我們只需要把其他三邊顏色設(shè)置為透明或者設(shè)置為和背景顏色相同就可以制作出一個(gè)三角形出來了,將其他三邊顏色設(shè)置為透明,即color的值為transparent,如果其他三邊顏色跟頁(yè)面背景一樣,雖然視覺上只能看到一個(gè)三角,但背景顏色一旦改變,其他三邊顏色也要隨之改變。如下代碼:
.demo{width:0; height:0; border-width:50px; border-style:solid; border-color:#CCC transparent transparent transparent;line-height:0;font-size:0;}
但是在IE6下 又有問題了 IE6不支持透明 transparent 如下:
但通過實(shí)驗(yàn)發(fā)現(xiàn)把border-style設(shè)置為dashed后,IE6下其他三邊就能透明了!如下:
還是上面的代碼 改成如下:
.demo{width:0; height:0; border-width:50px; border-style:solid dashed dashed dashed; border-color:#CCC transparent transparent transparent;line-height:0;font-size:0;}
現(xiàn)在我們已經(jīng)可以模擬出一個(gè)小三角形了,那么下面我們可以利用矩形和三角形結(jié)合起來使用 做個(gè)demo來實(shí)現(xiàn)上面2個(gè)效果了!首先我們先設(shè)計(jì)一個(gè)矩形框 然后把小三角形定位到矩形框上來。如下圖:
代碼如下:
div class="longen">span>/span>我是龍恩 我在氣泡框內(nèi)/div> .longen {position:relative;width:300px;height:100px;border:5px solid red;} .longen span{position:absolute;left:100px;bottom:-40px;border-width:20px;border-style:solid dashed dashed; border-color:red transparent transparent;font-size:0; line-height:0;}
現(xiàn)在指示方向的三角形箭頭是實(shí)心的,而我們想要的是空心的效果,我們?cè)侬B加一個(gè)同氣泡框背景顏色一樣的小三角,然后把這個(gè)疊加的小三角移動(dòng)一下位置就能達(dá)到了。
首先需要對(duì)HTML結(jié)構(gòu)進(jìn)行調(diào)整,如下圖
代碼如下:
div class="longen"> span>/span> em>/em> 我是龍恩 我在氣泡框內(nèi)/div> .longen {position:relative;width:300px;height:100px;border:5px solid red;} .longen span{position:absolute;left:100px;bottom:-40px;border-width:20px;border-style:solid dashed dashed; border-color:red transparent transparent;font-size:0; line-height:0;}.longen em{ position:absolute; bottom:-34px; left:100px;border-width:20px;border-style:solid dashed dashed; border-color:#FFF transparent transparent;font-size:0; line-height:0;}
下面我們?cè)賮砜纯吹诙N 不規(guī)則的效果該怎么實(shí)現(xiàn)呢?
HTML代碼和前面的一樣:
div class="longen">div class="arrow">em>/em>span>/span>/div>我是龍恩 我在氣泡框內(nèi)/div>
css改成如下:
.longen {width:300px; height:100px;position:relative; background-color:red;margin:50px auto 0;}
重新定位下三角箭頭:
.arrow{ position:absolute; width:70px; height:60px; left:-70px; bottom:10px;}
元素相鄰的兩邊border-style值設(shè)為solid(顯示),另兩邊設(shè)為transparent(不會(huì)顯示)
.arrow *{position:absolute; border-style:dashed solid solid dashed; font-size:0; line-height:0; }
下面首先我們來模擬一個(gè)直角三角形,把一個(gè)元素的相鄰兩邊color設(shè)為相同的值,另外兩邊顏色設(shè)為透明,即可得到一個(gè)直角:如下:
代碼繼續(xù)加上如下:
.arrow em{border-color:transparent #09F #09F transparent; border-width:30px 35px;}
繼續(xù) 把兩個(gè)直角三角形重疊在一起就可以得到一個(gè)不規(guī)則三角形 代碼如下:
.arrow span{ border-width:20px 35px;border-color:transparent #FFF #FFF transparent; bottom:0;}
到此 不規(guī)則的圖片已經(jīng)制作完成了!
完整代碼如下:
div class="longen"> div class="arrow"> em>/em> span>/span> /div> 我是龍恩 我在氣泡框內(nèi)/div>.longen {width:300px; height:100px;position:relative; background-color:red;margin:50px auto 0;}.arrow{ position:absolute; width:70px; height:60px; left:-70px; bottom:10px;}.arrow *{position:absolute; border-style:dashed solid solid dashed; font-size:0; line-height:0; }.arrow em{border-color:transparent #09F #09F transparent; border-width:30px 35px;} .arrow span{ border-width:20px 35px;border-color:transparent #FFF #FFF transparent; bottom:0;}
二: 除了通過設(shè)置元素的border來模擬小三角之外,還可以用特殊字符來模擬,用特殊字符模擬小三角同樣需要用到定位和重疊覆蓋,只不過不需要調(diào)整border屬性了。
先來看一個(gè)菱形“◆” ,它在頁(yè)面中的代碼是“#9670”,需要注意的是頁(yè)面編碼需要設(shè)置為utf-8,在網(wǎng)頁(yè)中可以把◆當(dāng)作文字處理,可以通過調(diào)整font-size來它的大小、通過color來設(shè)置它的顏色。
hTML代碼如下:
div class="longen"> div class="arrow"> em>#9670/em> span>#9670/span> /div> 我是龍恩 我在氣泡框內(nèi)/div>
先來設(shè)置最外層div的樣式,得到一個(gè)矩形框:
代碼如下:
.longen{ width:300px; height:100px;position:relative; border:5px solid red; margin:50px auto 0;}
接著定位箭頭最外層容器div,便于觀察可以先設(shè)置一個(gè)背景色 :
代碼如下:
.arrow{ position:absolute; width:40px; height:40px; left:100px; bottom:-40px; background:#ccc;overflow:hidden;}
再對(duì)◆設(shè)置樣式:
.arrow *{position:absolute; font-size:40px; line-height:40px; width:40px; font-family:SimSun; font-style:normal; font-weight:normal; text-align:center; vertical-align:middle;}
圖如下:
注意:為了◆主流瀏覽器中顯示一致,需要清除瀏覽器的默認(rèn)字體樣式,特別注意這里字體的設(shè)置再分別修改em、span標(biāo)簽的字體顏色,并對(duì)這兩個(gè)標(biāo)簽定位:代碼如下:
.arrow em{ color:red; top:-15px;}.arrow span{ color:#fff; top:-21px;}
最終效果圖還是和上面一樣 如下:
完整代碼如下:
div class="longen"> div class="arrow"> em>#9670/em> span>#9670/span> /div> 我是龍恩 我在氣泡框內(nèi)/div> .longen{ width:300px; height:100px;position:relative; border:5px solid red; margin:50px auto 0;}.arrow{ position:absolute; width:40px; height:40px; left:100px; bottom:-40px;overflow:hidden;}.arrow *{position:absolute; font-size:40px; line-height:40px; width:40px; font-family:SimSun; font-style:normal; font-weight:normal; text-align:center; vertical-align:middle;}.arrow em{ color:red; top:-15px;}.arrow span{ color:#fff; top:-21px;}
補(bǔ)充:以上方式實(shí)現(xiàn)小三角的過程中不可避免的增加了多余的標(biāo)簽,如果不要求所有瀏覽器中顯示一致的話, 我們可以利用css3來實(shí)現(xiàn)這個(gè)小三角.div class="longen"> css3氣泡框/div>.longen{ width:300px; height:100px; border:5px solid #09F; position:relative; background-color:#FFF; } .longen:before,.longen: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; } .longen:after{ bottom:-33px; border-color:#FFF transparent transparent; }
效果和上面一樣。本人也是通過google的 自己研究下 做的demo 確實(shí)還不錯(cuò) 所以就分享出來了 如果分析的不清晰 請(qǐng)各位大牛多多指教!本人能力暫時(shí)有限??!
您可能感興趣的文章:- JS+CSS設(shè)置img在DIV中只顯示Img垂直居中的部分
- js、css、img等瀏覽器緩存問題的2種解決方案
- 使用CSS和jQuery模擬select并附提交后取得數(shù)據(jù)的代碼
- jQuery的顯示和隱藏方法與css隱藏的樣式對(duì)比
- 利用CSS、JavaScript及Ajax實(shí)現(xiàn)高效的圖片預(yù)加載
- 純CSS繪制三角形(各種角度)