純CSS繪制三角形箭頭效果
發(fā)布時(shí)間：2014-05-07 13:23:23 作者：佚名 
我要評(píng)論
我要評(píng)論最近我想修改一下這個(gè)網(wǎng)站，我想在上面放置一個(gè)提示框。這是很容易，但我想讓提示框上有一個(gè)三角形的箭頭?？墒?，一想到這需要使用圖片，并且各種顏色，各種方向的箭頭要準(zhǔn)備無(wú)數(shù)種，這幾乎是一種災(zāi)難。幸運(yùn)的是，MooTools的核心開發(fā)著Darren Waddell告訴了我一個(gè)非常棒
使用純CSS，你只需要很少的代碼就可以創(chuàng)作出各種瀏覽器都兼容的三角形箭頭！
CSS代碼
復(fù)制代碼
代碼如下:/* create an arrow that points up */
div.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent; /* left arrow slant */
border-right: 5px solid transparent; /* right arrow slant */
border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */
font-size: 0;
line-height: 0;
}
/* create an arrow that points down */
div.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #2f2f2f;
font-size: 0;
line-height: 0;
}
/* create an arrow that points left */
div.arrow-left {
width: 0;
height: 0;
border-bottom: 5px solid transparent; /* left arrow slant */
border-top: 5px solid transparent; /* right arrow slant */
border-right: 5px solid #2f2f2f; /* bottom, add background color here */
font-size: 0;
line-height: 0;
}
/* create an arrow that points right */
div.arrow-right {
width: 0;
height: 0;
border-bottom: 5px solid transparent; /* left arrow slant */
border-top: 5px solid transparent; /* right arrow slant */
border-left: 5px solid #2f2f2f; /* bottom, add background color here */
font-size: 0;
line-height: 0;
}
繪制這些三角形的關(guān)鍵在于，你要讓箭頭所指方向的兩個(gè)側(cè)邊有很粗的邊框。而背向箭頭方向的一邊也是同樣粗的邊框，而這條邊的顏色就是你的三角形的顏色。邊框越粗，三角形越大。用這種方法你可以繪制出各種顏色、各種大小、各種朝向的箭頭。最妙的是，你只需要幾行CSS代碼就能實(shí)現(xiàn)這種效果。
使用:before和:after繪制CSS三角形
上面的CSS例子使用的是真正的頁(yè)面元素進(jìn)行繪制，但有時(shí)候這個(gè)真正的元素還有它用，你不能走上面直接進(jìn)行操作，這是怎么辦？純CSS的三角形其實(shí)還可以使用偽元素(pseudo-element)進(jìn)行繪制。下面就是繪制方法：
復(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 */
}
/* these arrows will point up */
/* top-stacked, smaller arrow */
div.tooltip:before {
border-bottom-color: #fff; /* arrow color */</p> <p> /* 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 */</p> <p> /* positioning */
position: absolute;
top: -24px;
left: 255px;
z-index: 1;
}
背向箭頭的那一側(cè)的邊框的顏色就是三角形箭頭的顏色。畫這個(gè)箭頭并不需要同時(shí)使用:before和:after兩個(gè)偽元素——一個(gè)就夠了。而另外一個(gè)，你可以把它用作前一個(gè)的背景陰影或背景邊。
真應(yīng)該早點(diǎn)知道這種技術(shù)！我相信在將來(lái)做界面改進(jìn)時(shí)這種簡(jiǎn)潔省事的技術(shù)將派上大用途。
相關(guān)文章
CSS繪制三角形的實(shí)現(xiàn)代碼(border法)
這篇文章主要介紹了CSS繪制三角形的實(shí)現(xiàn)代碼(border法)的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-09-11- 相信大家在日常網(wǎng)站布局中，經(jīng)常遇到一些三角形形狀的按鈕，有的人可能會(huì)想到用圖片代替，其實(shí)我們利用css就可以實(shí)現(xiàn)，本文給大家介紹了利用css繪制三角形的方法，以及一些2016-10-17
- 這篇文章主要為大家詳細(xì)介紹了純CSS繪制三角形箭頭圖案技術(shù)，如何使用:before和:after繪制CSS三角形，感興趣的小伙伴們可以參考一下2016-06-28
- 這篇文章主要為大家詳細(xì)介紹了Html+CSS繪制三角形圖標(biāo)的相關(guān)代碼，很多網(wǎng)頁(yè)都有三角形的圖標(biāo)，通常是切的圖片，這里可以用css3+html寫出三角形，感興趣的小伙伴們可以參考2016-06-17
- 這篇文章主要教大家使用css繪制透明三角形，css繪制三角形很簡(jiǎn)單，如何繪制透明的三角形，本文為大家解決這個(gè)問題，感興趣的小伙伴們可以參考一下2016-03-10
- 這篇文章主要介紹了用CSS3繪制三角形的簡(jiǎn)單方法,是CSS前端繪圖的基礎(chǔ),需要的朋友可以參考下2015-07-17
- 用CSS也可以畫畫了.不錯(cuò)哦.下面我們來(lái)畫一個(gè)三角形看看2012-06-04
CSS中三角形的繪制與巧妙應(yīng)用實(shí)例詳解
這篇文章主要介紹了CSS中三角形的繪制與巧妙應(yīng)用，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-11
