純CSS實(shí)現(xiàn)箭頭、氣泡讓提示功能具有三角形圖標(biāo)
發(fā)布時間:2013-08-09 16:22:52 作者:佚名
我要評論

準(zhǔn)備添加tooltips提示信息效果.實(shí)現(xiàn)很容易,但我想要讓提示功能具有三角形的指示圖標(biāo),本文兩種實(shí)現(xiàn)方式: 使用或不使用 before 和 :after 偽元素,示例如下,有此需求的朋友可以參考下
演示地址:CSS Triangles Demo
本文兩種實(shí)現(xiàn)方式: 使用或不使用 before 和 :after 偽元素(偽類,pseudo-elements)
最近重新設(shè)計(jì)了我的網(wǎng)站,準(zhǔn)備添加tooltips提示信息效果.實(shí)現(xiàn)很容易,但我想要讓提示功能具有三角形的指示圖標(biāo)。
當(dāng)我重新思考想要所設(shè)計(jì)的每個圖標(biāo)顏色都隨心所欲的時候,采用圖片那就是一場災(zāi)難。
幸運(yùn)的是, MooTools 的核心開發(fā)者 Darren Waddell介紹了一個強(qiáng)大的技巧給我:CSS三角形.只使用純CSS語言,你就能創(chuàng)建兼容各個瀏覽器的三角形,用很少的代碼。
不使用偽類的 CSS 代碼如下:
/* 向上的箭頭,類似于A,只有三個邊,不能指定上邊框 */
div.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent; /* 左邊框的寬 */
border-right: 5px solid transparent; /* 右邊框的寬 */
border-bottom: 5px solid #2f2f2f; /* 下邊框的長度|高,以及背景色 */
font-size: 0;
line-height: 0;}
/* 向下的箭頭 類似于 V */
div.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
font-size: 0;
line-height: 0;
}
/* 向左的箭頭: 只有三個邊:上、下、右。而 <| 總體來看,向左三角形的高=上+下邊框的長度。 寬=右邊框的長度 */
div.arrow-left {
width: 0;
height: 0;
border-bottom: 15px solid transparent; /* 下邊框的高 */
border-top: 15px solid transparent; /* 上方邊框的高 */
border-right: 10px solid yellow; /* 右邊框的長度|寬度,以及背景色 */
font-size: 0;
line-height: 0;
}
/* 向右的箭頭: 只有三個邊:上、下、左。而 |> 總體來看,向右三角形的高=上+下邊框的長度。 寬=左邊框的長度 */
div.arrow-right {
width: 0;
height: 0;
border-bottom: 15px solid transparent; /* 下邊框的高 */
border-top: 15px solid transparent; /* 上方邊框的高 */
border-left: 60px solid green; /* 左邊框的長度|寬度,以及背景色 */
font-size: 0;
line-height: 0;
}
其中的秘密,就是這些三角形在你要指向的方向垂直的兩邊, 有巨大的邊框,而讓背面的邊框設(shè)置為你喜歡的顏色即可。
邊框越大,三角形就越大。調(diào)整三個邊框的長度,就可以構(gòu)建出各種不同的三角形。如果加上旋轉(zhuǎn),不知道似的否可以指定各種不同方向的圖形?
當(dāng)然,這個處理方法優(yōu)越的地方就在于代碼量非常少,同時非常靈活。
帶有 :before 和 :after 的CSS三角形
前面的例子可以很好的工作,但是如果你想要不只是一個三角形怎么辦?比如氣泡對話框,那么可以使用偽類來實(shí)現(xiàn)CSS三角形箭頭,對于彈出的提示信息來說非常完美,代碼如下:
div.tooltip {
/* tooltip content styling in here; nothing to do with arrows */
}
/* shared with before and after */
div.tooltip:before, div.tooltip:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent; /* arrow size */
}
/* 向上的箭頭 */
/* top-stacked, smaller arrow */
div.tooltip:before {
border-bottom-color: #fff; /* arrow color */
/* positioning */
position: absolute;
top: -19px;
left: 255px;
z-index: 2;
}
/* arrow which acts as a background shadow */
div.tooltip:after {
border-bottom-color: #333; /* arrow color */
/* positioning */
position: absolute;
top: -24px;
left: 255px;
z-index: 1;
}
一般來說在箭頭的背面邊框指定顏色,也可以只使用 :before 或者 :after 之中的一個。而第二個箭頭,可以被當(dāng)作背景邊框,或者作為第一個的陰影。
我想問自己為什么不早點(diǎn)知道這種技術(shù)。這個優(yōu)雅的技巧肯定會讓我在將來大大的提高制作tooltip元素的水平,同時也為我打開了一個廣闊的視野。
完整的頁面示例代碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head> <title>CSS 箭頭Demo</title>
<style type="text/css">
/* 向上的箭頭,類似于A,只有三個邊,不能指定上邊框 */
div.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent; /* 左邊框的寬 */
border-right: 5px solid transparent; /* 右邊框的寬 */
border-bottom: 5px solid #2f2f2f; /* 下邊框的長度|高,以及背景色 */
font-size: 0;
line-height: 0;
}
/* 向下的箭頭 類似于 V */
div.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
font-size: 0;
line-height: 0;
}
/* 向左的箭頭: 只有三個邊:上、下、右。而 <| 總體來看,向左三角形的高=上+下邊框的長度。 寬=右邊框的長度 */
div.arrow-left {
width: 0;
height: 0;
border-bottom: 15px solid transparent; /* 下邊框的高 */
border-top: 15px solid transparent; /* 上方邊框的高 */
border-right: 10px solid yellow; /* 右邊框的長度|寬度,以及背景色 */
font-size: 0;
line-height: 0;
}
/* 向右的箭頭: 只有三個邊:上、下、左。而 |> 總體來看,向右三角形的高=上+下邊框的長度。 寬=左邊框的長度 */
div.arrow-right {
width: 0;
height: 0;
border-bottom: 15px solid transparent; /* 下邊框的高 */
border-top: 15px solid transparent; /* 上方邊框的高 */
border-left: 60px solid green; /* 左邊框的長度|寬度,以及背景色 */
font-size: 0;
line-height: 0;
}
/* 基本樣式 */
.tip {
background: #eee;
border: 1px solid #ccc;
padding: 10px;
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
position: relative;
width: 200px;
}
/* 箭頭 - :before and :after, 一起組成了好看的氣泡小箭頭 */
.tip:before {
position: absolute;
display: inline-block;
border-top: 7px solid transparent;
border-right: 7px solid #eee;
border-bottom: 7px solid transparent;
border-right-color: rgba(0, 0, 0, 0.2);
left: -8px;
top: 20px;
content: '';
}
/* 背景陰影*/
.tip:after {
position: absolute;
display: inline-block;
border-top: 6px solid transparent;
border-right: 6px solid #eee;
border-bottom: 6px solid transparent;
left: -6px;
top: 21px;
content: '';
}
</style>
</head>
<body>
<div id="contentHolder">
<h1>CSS 箭頭Demo</h1>
<p>以下代碼.是極好的純 CSS 箭頭樣式,不使用背景圖!</p>
<div id="position:relative;">
<div class="arrow-up">向上的箭頭</div>
<div class="arrow-down">向下的箭頭</div>
<div class="arrow-left">向左的箭頭</div>
<div class="arrow-right">向右的箭頭</div>
</div>
<h2>CSS 箭頭氣泡 ,使用 偽類(Pseudo-Element)</h2>
<div style="position:relative;">
<div class="tip">
企業(yè)級開發(fā)首選技術(shù)是什么?JavaEE和.Net哪個技術(shù)更好?在JavaEE開發(fā)中主要用哪些框架?另外在移動大熱的趨勢下如何開發(fā)出一個成功的Android產(chǎn)品?
</div>
<br/>
<div class="tip">
向左的箭頭: 只有三個邊:上、下、右。而 < | 總體來看,向左三角形的高=上+下邊框的長度。 寬=右邊框的長度
向右的箭頭: 只有三個邊:上、下、左。而 |> 總體來看,向右三角形的高=上+下邊框的長度。 寬=左邊框的長度
向上的箭頭,類似于A,只有三個邊,不能指定上邊框
</div>
</div>
</div>
</body>
</html>
本文兩種實(shí)現(xiàn)方式: 使用或不使用 before 和 :after 偽元素(偽類,pseudo-elements)
最近重新設(shè)計(jì)了我的網(wǎng)站,準(zhǔn)備添加tooltips提示信息效果.實(shí)現(xiàn)很容易,但我想要讓提示功能具有三角形的指示圖標(biāo)。
當(dāng)我重新思考想要所設(shè)計(jì)的每個圖標(biāo)顏色都隨心所欲的時候,采用圖片那就是一場災(zāi)難。
幸運(yùn)的是, MooTools 的核心開發(fā)者 Darren Waddell介紹了一個強(qiáng)大的技巧給我:CSS三角形.只使用純CSS語言,你就能創(chuàng)建兼容各個瀏覽器的三角形,用很少的代碼。
不使用偽類的 CSS 代碼如下:
復(fù)制代碼
代碼如下:/* 向上的箭頭,類似于A,只有三個邊,不能指定上邊框 */
div.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent; /* 左邊框的寬 */
border-right: 5px solid transparent; /* 右邊框的寬 */
border-bottom: 5px solid #2f2f2f; /* 下邊框的長度|高,以及背景色 */
font-size: 0;
line-height: 0;}
/* 向下的箭頭 類似于 V */
div.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
font-size: 0;
line-height: 0;
}
/* 向左的箭頭: 只有三個邊:上、下、右。而 <| 總體來看,向左三角形的高=上+下邊框的長度。 寬=右邊框的長度 */
div.arrow-left {
width: 0;
height: 0;
border-bottom: 15px solid transparent; /* 下邊框的高 */
border-top: 15px solid transparent; /* 上方邊框的高 */
border-right: 10px solid yellow; /* 右邊框的長度|寬度,以及背景色 */
font-size: 0;
line-height: 0;
}
/* 向右的箭頭: 只有三個邊:上、下、左。而 |> 總體來看,向右三角形的高=上+下邊框的長度。 寬=左邊框的長度 */
div.arrow-right {
width: 0;
height: 0;
border-bottom: 15px solid transparent; /* 下邊框的高 */
border-top: 15px solid transparent; /* 上方邊框的高 */
border-left: 60px solid green; /* 左邊框的長度|寬度,以及背景色 */
font-size: 0;
line-height: 0;
}
其中的秘密,就是這些三角形在你要指向的方向垂直的兩邊, 有巨大的邊框,而讓背面的邊框設(shè)置為你喜歡的顏色即可。
邊框越大,三角形就越大。調(diào)整三個邊框的長度,就可以構(gòu)建出各種不同的三角形。如果加上旋轉(zhuǎn),不知道似的否可以指定各種不同方向的圖形?
當(dāng)然,這個處理方法優(yōu)越的地方就在于代碼量非常少,同時非常靈活。
帶有 :before 和 :after 的CSS三角形
前面的例子可以很好的工作,但是如果你想要不只是一個三角形怎么辦?比如氣泡對話框,那么可以使用偽類來實(shí)現(xiàn)CSS三角形箭頭,對于彈出的提示信息來說非常完美,代碼如下:
復(fù)制代碼
代碼如下:div.tooltip {
/* tooltip content styling in here; nothing to do with arrows */
}
/* shared with before and after */
div.tooltip:before, div.tooltip:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent; /* arrow size */
}
/* 向上的箭頭 */
/* top-stacked, smaller arrow */
div.tooltip:before {
border-bottom-color: #fff; /* arrow color */
/* positioning */
position: absolute;
top: -19px;
left: 255px;
z-index: 2;
}
/* arrow which acts as a background shadow */
div.tooltip:after {
border-bottom-color: #333; /* arrow color */
/* positioning */
position: absolute;
top: -24px;
left: 255px;
z-index: 1;
}
一般來說在箭頭的背面邊框指定顏色,也可以只使用 :before 或者 :after 之中的一個。而第二個箭頭,可以被當(dāng)作背景邊框,或者作為第一個的陰影。
我想問自己為什么不早點(diǎn)知道這種技術(shù)。這個優(yōu)雅的技巧肯定會讓我在將來大大的提高制作tooltip元素的水平,同時也為我打開了一個廣闊的視野。
完整的頁面示例代碼如下:
復(fù)制代碼
代碼如下:<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head> <title>CSS 箭頭Demo</title>
<style type="text/css">
/* 向上的箭頭,類似于A,只有三個邊,不能指定上邊框 */
div.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent; /* 左邊框的寬 */
border-right: 5px solid transparent; /* 右邊框的寬 */
border-bottom: 5px solid #2f2f2f; /* 下邊框的長度|高,以及背景色 */
font-size: 0;
line-height: 0;
}
/* 向下的箭頭 類似于 V */
div.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
font-size: 0;
line-height: 0;
}
/* 向左的箭頭: 只有三個邊:上、下、右。而 <| 總體來看,向左三角形的高=上+下邊框的長度。 寬=右邊框的長度 */
div.arrow-left {
width: 0;
height: 0;
border-bottom: 15px solid transparent; /* 下邊框的高 */
border-top: 15px solid transparent; /* 上方邊框的高 */
border-right: 10px solid yellow; /* 右邊框的長度|寬度,以及背景色 */
font-size: 0;
line-height: 0;
}
/* 向右的箭頭: 只有三個邊:上、下、左。而 |> 總體來看,向右三角形的高=上+下邊框的長度。 寬=左邊框的長度 */
div.arrow-right {
width: 0;
height: 0;
border-bottom: 15px solid transparent; /* 下邊框的高 */
border-top: 15px solid transparent; /* 上方邊框的高 */
border-left: 60px solid green; /* 左邊框的長度|寬度,以及背景色 */
font-size: 0;
line-height: 0;
}
/* 基本樣式 */
.tip {
background: #eee;
border: 1px solid #ccc;
padding: 10px;
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
position: relative;
width: 200px;
}
/* 箭頭 - :before and :after, 一起組成了好看的氣泡小箭頭 */
.tip:before {
position: absolute;
display: inline-block;
border-top: 7px solid transparent;
border-right: 7px solid #eee;
border-bottom: 7px solid transparent;
border-right-color: rgba(0, 0, 0, 0.2);
left: -8px;
top: 20px;
content: '';
}
/* 背景陰影*/
.tip:after {
position: absolute;
display: inline-block;
border-top: 6px solid transparent;
border-right: 6px solid #eee;
border-bottom: 6px solid transparent;
left: -6px;
top: 21px;
content: '';
}
</style>
</head>
<body>
<div id="contentHolder">
<h1>CSS 箭頭Demo</h1>
<p>以下代碼.是極好的純 CSS 箭頭樣式,不使用背景圖!</p>
<div id="position:relative;">
<div class="arrow-up">向上的箭頭</div>
<div class="arrow-down">向下的箭頭</div>
<div class="arrow-left">向左的箭頭</div>
<div class="arrow-right">向右的箭頭</div>
</div>
<h2>CSS 箭頭氣泡 ,使用 偽類(Pseudo-Element)</h2>
<div style="position:relative;">
<div class="tip">
企業(yè)級開發(fā)首選技術(shù)是什么?JavaEE和.Net哪個技術(shù)更好?在JavaEE開發(fā)中主要用哪些框架?另外在移動大熱的趨勢下如何開發(fā)出一個成功的Android產(chǎn)品?
</div>
<br/>
<div class="tip">
向左的箭頭: 只有三個邊:上、下、右。而 < | 總體來看,向左三角形的高=上+下邊框的長度。 寬=右邊框的長度
向右的箭頭: 只有三個邊:上、下、左。而 |> 總體來看,向右三角形的高=上+下邊框的長度。 寬=左邊框的長度
向上的箭頭,類似于A,只有三個邊,不能指定上邊框
</div>
</div>
</div>
</body>
</html>
相關(guān)文章
使用CSS和Bootstrap圖標(biāo)制作上下跳動的指示箭頭動畫效果
有時侯頁面很長,需要指示箭頭告訴用戶下面還有東西。下面腳本之家小編給大家?guī)砹耸褂肅SS和Bootstrap圖標(biāo)制作上下跳動的指示箭頭動畫效果,感興趣的朋友一起看看吧2018-06-04純CSS制作各種各樣的網(wǎng)頁圖標(biāo)(三角形、暫停按鈕、下載箭頭、加號等)
這篇文章主要介紹了純CSS制作各種各樣的網(wǎng)頁圖標(biāo)(三角形、暫停按鈕、下載箭頭、加號等)的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過2018-03-27- css3功能非常強(qiáng)大,之前需要圖片完成的icon,現(xiàn)在我們只需要幾段css代碼就可以實(shí)現(xiàn)此功能。下面給大家分享純css制作的圓,橢圓,三角形箭頭圖標(biāo),非常使用,需要的朋友參考2016-03-30
css實(shí)現(xiàn)的交互小三角箭頭圖標(biāo)
本文為大家介紹下使用純css實(shí)現(xiàn)的交互小三角箭頭圖標(biāo),示例代碼如下,感興趣的朋友可以參考下2013-12-10CSS多級數(shù)字序號的目錄列表(2.2.1. 2.2.2 列表序號)
這篇文章主要介紹了CSS多級數(shù)字序號的目錄列表(2.2.1. 2.2.2 列表序號),通過css代碼定義將數(shù)字多級列表展示出來,,需要的朋友可以參考下2017-08-14GitHub倡導(dǎo)的CSS編寫風(fēng)格及文件目錄部署指南
這篇文章主要介紹了GitHub倡導(dǎo)的CSS編寫風(fēng)格及文件目錄部署指南,包括SCSS結(jié)構(gòu)部署和px的使用等方面,需要的朋友可以參考下2016-04-15完美解決調(diào)用上級目錄中的css樣式文件的路徑問題
調(diào)用上級目錄中的css樣式的路徑問題,為什么樣式文件沒有起到效果,想必有很多的朋友遇到過吧,下面為大家分享個不錯的解決方法,需要的朋友不要錯過2013-11-20CSS拾遺之箭頭,目錄,圖標(biāo)的實(shí)現(xiàn)代碼
這篇文章主要介紹了CSS拾遺之箭頭,目錄,圖標(biāo)的實(shí)現(xiàn)代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-14