三種帶箭頭提示框總結(jié)實(shí)例
更新時(shí)間：2016年06月14日 09:59:29 作者：2778085001
這篇文章主要介紹了三種帶箭頭提示框總結(jié)實(shí)例 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
無論是提示框還是導(dǎo)航欄都能看到如上圖所示的帶有箭頭的框框，這種箭頭可以通過背景圖片或者是css來實(shí)現(xiàn)，本文介紹三種通過css實(shí)現(xiàn)帶箭頭的提示框。
1.通過border屬性
思路：兩個(gè)三角形，通過定位使兩個(gè)三角形相差1px作為邊框。
2.CSS3 transfrom
思路：先做一個(gè)兩條邊相同顏色的正方形，然后旋轉(zhuǎn)一定角度就是三角形了
3.特殊字符'♦'
思路：特殊字符漏出上半部分，看上去就像三角形了
一、通過border屬性：
我們先做一個(gè)寬和高都是10px的div，邊框也是10px，
width: 10px; height: 10px; border: 10px solid; border-color: red green yellow blue;
如下圖：
圖中間空白是我們?cè)O(shè)置的寬和高，如果設(shè)置為0px，會(huì)出現(xiàn)什么情況呢？，如下圖：
這時(shí)候我們就可以通過設(shè)置它的左右和下邊框的顏色都設(shè)成透明或和背景顏色相同的顏色，就出來我們想要的三角形了。如下圖：
現(xiàn)在我們來實(shí)現(xiàn)第一幅圖上的效果：
css：
.info {
margin-top: 50px;
position:relative;
width:200px;
height:50px;
line-height:60px;
background:#F6F1B3;
box-shadow:1px 2px 3px #E9D985;
border:1px solid #DACE7C;
border-radius:4px;
text-align:center;
color:red;
}
.nav {
position:absolute;
left:30px;
overflow:hidden;
width:0;
height:0;
border-width:10px;
border-style:solid dashed dashed dashed;
}
.nav-border {
top:-20px;
border-color:transparent transparent #DACE7C transparent;
}
.nav-background {
top:-19px;
border-color:transparent transparent #F6F1B3 transparent;
}
html：
<div class="info"> <span>提示信息</span> <div class="nav nav-border"></div> <div class="nav nav-background"></div> </div>
二、CSS3 transfrom
我們首先制作一個(gè)兩條相鄰的邊框顏色相同，其他兩條邊邊框?yàn)?px的div方框。如圖：
在將方框旋轉(zhuǎn)45度就可以實(shí)現(xiàn)三角提示效果了。
css：
.info {
margin-top : 50px;
position :relative;
width :200px;
height :50px;
line-height :60px;
background :#F6F1B3;
box-shadow :1px 2px 3px #E9D985;
border :1px solid #DACE7C;
border-radius :4px;
text-align :center;
color :red;
}
.nav {
position :absolute;
top :-8px;
left :30px;
overflow :hidden;
width :13px;
height :13px;
background :#F6F1B3;
border-left :1px solid #DACE7C;
border-top :1px solid #DACE7C;
-webkit-transform :rotate(45deg);
-moz-transform :rotate(45deg);
-o-transform :rotate(45deg);
transform :rotate(45deg);
}
html：
<div class="info"> <span>提示信息</span> <div class="nav"></div> </div>
三、特殊字符'♦'
'♦'是一個(gè)特殊字符，也就相當(dāng)于一個(gè)字，所以大小是通過font-size來設(shè)置，實(shí)現(xiàn)第一幅圖的效果：
css：
.info {
margin-top: 50px;
position:relative;
width:200px;
height:50px;
line-height:60px;
background:#F6F1B3;
box-shadow:1px 2px 3px #E9D985;
border:1px solid #DACE7C;
border-radius:4px;
text-align:center;
color:red;
}
.nav {
position:absolute;
left:30px;
overflow:hidden;
width:24px;
height:24px;
font:normal 24px "微軟雅黑";
}
.nav-border {
top:-17px;
color:#DACE7C;
}
.nav-background {
top:-16px;
color:#F6F1B3;
}
html：
<div class="info"> <span>提示信息</span> <div class="nav nav-border">♦</div> <div class="nav nav-background">♦</div> </div>
下面是一個(gè)兼容IE5.5+,chrome,Firfox等瀏覽器的一個(gè)demo，如果你有用到可以直接考到自己的項(xiàng)目中。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
div.container{
position :absolute;
top :30px;
left :40px;
font-size : 9pt;
display :block;
height :100px;
width :200px;
background-color :transparent;
*border :1px solid #666;
}
s{
position :absolute;
top :-20px;
*top :-22px;
left :20px;
display :block;
height :0;
width :0;
font-size : 0;
line-height : 0;
border-color :transparent transparent #666 transparent;
border-style :dashed dashed solid dashed;
border-width :10px;
}
i{
position :absolute;
top :-9px;
*top :-9px;
left :-10px;
display :block;
height :0;
width :0;
font-size : 0;
line-height : 0;
border-color :transparent transparent #fff transparent;
border-style :dashed dashed solid dashed;
border-width :10px;
}
.content{
border :1px solid #666;
-moz-border-radius :3px;
-webkit-border-radius :3px;
position :absolute;
background-color :#fff;
width :100%;
height :100%;
padding :5px;
*top :-2px;
*border-top :1px solid #666;
*border-top :1px solid #666;
*border-left :none;
*border-right :none;
*height :102px;
box-shadow : 3px 3px 4px #999;
-moz-box-shadow : 3px 3px 4px #999;
-webkit-box-shadow : 3px 3px 4px #999;
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";
}
</style>
</head>
<body>
<div class="container">
<div class="content">
hello world!
</div>
<s>
<i></i>
</s>
</div>
</body>
</html>
效果圖：
小結(jié)：
帶箭頭的提示框給用戶的交互帶來很好的效果，本文介紹了三個(gè)方法，如果你還有其他方法可以@me，我會(huì)非常感激。希望本文能夠?qū)δ阌行椭?/p>
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js輪盤抽獎(jiǎng)實(shí)例，分析js輪盤抽獎(jiǎng)實(shí)現(xiàn)原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
67 個(gè)節(jié)約開發(fā)時(shí)間的前端開發(fā)者的工具、庫和資源
在本文中，我不會(huì)去談 React、Angular、Vue 等等這些大的前端框架，也不會(huì)談 Atom、VS code、Sublime 等等這些已經(jīng)很出名的代碼編輯器，我只是想簡單的分享一套我認(rèn)為有助于提升開發(fā)者工作流的工具集2017-09-09
這篇文章主要介紹了記錄一次開發(fā)微信網(wǎng)頁分享的步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
最近做項(xiàng)目遇到這樣的需求，頁面折疊超出的的部分顯示省略號(hào)，點(diǎn)擊展開后顯示全部內(nèi)容。具體實(shí)現(xiàn)代碼大家跟隨腳本之家小編一起學(xué)習(xí)吧2018-06-06
[紅色]圖片預(yù)載入...2006-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序繪制半圓（弧形）進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了JS正則表達(dá)式封裝與使用操作,涉及javascript使用正則表達(dá)式針對(duì)郵箱、手機(jī)號(hào)、身份證、用戶名、中文等簡單驗(yàn)證操作技巧,需要的朋友可以參考下2019-05-05
js數(shù)組方法reduce經(jīng)典用法代碼分享
本文給大家整理了很多關(guān)于js數(shù)組方法reduce的經(jīng)典代碼片段，能夠讓大家更好的理解reduce的實(shí)例用法，一起學(xué)習(xí)下吧。2018-01-01
這篇文章主要給大家分享了js中toString方法的3個(gè)作用，文章圍繞js中toString方法的相關(guān)資料展開全文內(nèi)容，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助2021-12-12
位運(yùn)算,那些看似晦澀但又蘊(yùn)含無限魔力的數(shù)字魔術(shù),在JavaScript開發(fā)中扮演了默默無聞卻又至關(guān)重要的角色,本文介紹多個(gè)js位運(yùn)算的使用場景,闡述在JavaScript中,如何巧妙運(yùn)用位運(yùn)算實(shí)現(xiàn)效率的提升和算法的優(yōu)化,需要的朋友可以參考下2023-12-12