欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

純CSS實(shí)現(xiàn)箭頭、氣泡讓提示功能具有三角形圖標(biāo)

  發(fā)布時(shí)間：2013-08-09 16:22:52   作者：佚名   我要評(píng)論
準(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ì)的每個(gè)圖標(biāo)顏色都隨心所欲的時(shí)候，采用圖片那就是一場災(zāi)難。
幸運(yùn)的是, MooTools 的核心開發(fā)者 Darren Waddell介紹了一個(gè)強(qiáng)大的技巧給我：CSS三角形.只使用純CSS語言，你就能創(chuàng)建兼容各個(gè)瀏覽器的三角形，用很少的代碼。

不使用偽類的 CSS 代碼如下:

復(fù)制代碼
代碼如下:

/* 向上的箭頭,類似于A,只有三個(gè)邊，不能指定上邊框 */
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;
}
/* 向左的箭頭: 只有三個(gè)邊：上、下、右。而 <| 總體來看，向左三角形的高=上+下邊框的長度。 寬=右邊框的長度 */
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;
}
/* 向右的箭頭: 只有三個(gè)邊：上、下、左。而 |> 總體來看，向右三角形的高=上+下邊框的長度。 寬=左邊框的長度 */
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è)邊框的長度，就可以構(gòu)建出各種不同的三角形。如果加上旋轉(zhuǎn)，不知道似的否可以指定各種不同方向的圖形?
當(dāng)然，這個(gè)處理方法優(yōu)越的地方就在于代碼量非常少，同時(shí)非常靈活。

帶有 :before 和 :after 的CSS三角形
前面的例子可以很好的工作，但是如果你想要不只是一個(gè)三角形怎么辦？比如氣泡對(duì)話框，那么可以使用偽類來實(shí)現(xiàn)CSS三角形箭頭，對(duì)于彈出的提示信息來說非常完美，代碼如下：

復(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 之中的一個(gè)。而第二個(gè)箭頭，可以被當(dāng)作背景邊框，或者作為第一個(gè)的陰影。
我想問自己為什么不早點(diǎn)知道這種技術(shù)。這個(gè)優(yōu)雅的技巧肯定會(huì)讓我在將來大大的提高制作tooltip元素的水平，同時(shí)也為我打開了一個(gè)廣闊的視野。

完整的頁面示例代碼如下：

復(fù)制代碼
代碼如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head> <title>CSS 箭頭Demo</title>
<style type="text/css">
/* 向上的箭頭,類似于A,只有三個(gè)邊，不能指定上邊框 */
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;
}
/* 向左的箭頭: 只有三個(gè)邊：上、下、右。而 <| 總體來看，向左三角形的高=上+下邊框的長度。 寬=右邊框的長度 */
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;
}
/* 向右的箭頭: 只有三個(gè)邊：上、下、左。而 |> 總體來看，向右三角形的高=上+下邊框的長度。 寬=左邊框的長度 */
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è)級(jí)開發(fā)首選技術(shù)是什么？JavaEE和.Net哪個(gè)技術(shù)更好？在JavaEE開發(fā)中主要用哪些框架？另外在移動(dòng)大熱的趨勢下如何開發(fā)出一個(gè)成功的Android產(chǎn)品？
</div>
<br/>
<div class="tip">
向左的箭頭: 只有三個(gè)邊：上、下、右。而 < | 總體來看，向左三角形的高=上+下邊框的長度。 寬=右邊框的長度

向右的箭頭: 只有三個(gè)邊：上、下、左。而 |> 總體來看，向右三角形的高=上+下邊框的長度。 寬=左邊框的長度

向上的箭頭,類似于A,只有三個(gè)邊，不能指定上邊框
</div>
</div>
</div>
</body>
</html>

相關(guān)文章

最新評(píng)論