虎扯：純css3各方向小三角的制作原理分析-小老虎的牙

One：不浪費(fèi)自己的時(shí)間，

Tow：不浪費(fèi)讀者的時(shí)間，

第三就是希望有緣的朋友們多多指教，共度前端快樂的大坑！?。?/p>

咱們今天來(lái)做一個(gè)居家旅行必備的小tips，展現(xiàn)前端老前輩的智慧，積淀的文化...

先來(lái)一個(gè)小口訣【呆會(huì)會(huì)用到的，不用著急記住它哦】

四方小三角（上，下，左，右）

尖角反方線，給顏色 /*設(shè)置邊線*/

兩邊夾角線成透明 /*設(shè)置邊線*/

參數(shù)都相同 /*線的參數(shù)都一樣*/

給予三條邊 /*有三條邊哦*/

八方小三角（左上，左下，右上，右下）

左右相反成透明 /*設(shè)置邊線*/

上下相同給顏色 /*設(shè)置邊線*/

送你兩條邊 /*好方便，就兩條邊*/

哥們上代碼：舉個(gè)梨子

四方來(lái)角之（up，up，up上）來(lái)個(gè)div盒子，是否可以用其他的容器？（哥們沒試過(guò)，夠用就好）

.up{
	position: absolute;; /*這里咱可以視情況而定*/
	border-left:30px solid transparent; /*口訣，左，右邊成透明*/
 border-right:30px solid transparent; /*30px可以控制三角的大小*/
 border-bottom:30px solid black; /*口訣，相反線，給顏色*/
	width: 0;
	height: 0; /*否則小三角在block狀態(tài)下，會(huì)拉滿寬度*/
}

結(jié)果是：這樣的（無(wú)視小鼠標(biāo)）

哥們上代碼（2）

先復(fù)習(xí)一遍口訣，向上向上走...

然后再來(lái)，舉個(gè)梨子（八方來(lái)角之“left-top，left-top，left-top左上”）

.left-top{
	position: relative;
	border-top: 30px solid lawngreen; /*發(fā)現(xiàn)沒有上下相同，設(shè)置顏色*/
 border-right: 30px solid transparent; /*左右相反，給透明*/
 width: 0; /*只有兩條邊的設(shè)置哦*/
 	height: 0;
}

效果圖：（完美哦！?。?/p>

其中的口訣，可以完全使用，最主要的好處就是可以不用記住源碼，自己手寫的css然后在網(wǎng)頁(yè)中完美顯示的感覺就是“這個(gè)feel倍爽，倍爽...”

主要的用途：

“導(dǎo)航欄中的小三角指向”

“其他暫時(shí)沒有發(fā)現(xiàn)，哈哈噠..”

如果小白同志看見這篇文章的時(shí)候，就聯(lián)系我吧，菜鳥見小白，哥倆淚汪汪

有幸被大神看見，那是三生有幸，希望指導(dǎo)一二

到這為止，小三角tips的博文就玩了，其中原理可理解也可不理解，網(wǎng)上有一大堆的源碼，直接拿過(guò)來(lái)用就是了，但是不符合咱可貴的極客精神

來(lái)一起念一遍“極客精神，極客精神..”

片尾聲明：

本文的原理是博主自己的收集理解，經(jīng)過(guò)測(cè)試完全沒有問(wèn)題，當(dāng)然也不排除有其他的方式達(dá)到這種效果，各位前端的博友有志同道合的請(qǐng)關(guān)注我或者我

要關(guān)注你哦

最后的落款：

16-03-10日，

環(huán)境還是不錯(cuò)的，

周圍室友愉快的斗地主

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:0731-84117792 E-MAIL:11247931@qq.com