入駐博客園兩個月之後的第一篇隨筆，希望能夠做到三個原則： One：不浪費自己的時間， Tow：不浪費讀者的時間， 第三就是希望有緣的朋友們多多指教，共度前端快樂的大坑！！！ 咱們今天來做一個居家旅行必備的小tips，展現前端老前輩的智慧，積澱的文化... 先來一個小口訣【呆會會用到的，不用著急記住它
入駐博客園兩個月之後的第一篇隨筆，希望能夠做到三個原則：
One：不浪費自己的時間，
Tow：不浪費讀者的時間，
第三就是希望有緣的朋友們多多指教，共度前端快樂的大坑！！！
咱們今天來做一個居家旅行必備的小tips，展現前端老前輩的智慧，積澱的文化...
先來一個小口訣【呆會會用到的，不用著急記住它哦】
四方小三角（上，下，左，右）
尖角反方線，給顏色 /*設置邊線*/
兩邊夾角線成透明 /*設置邊線*/
參數都相同 /*線的參數都一樣*/
給予三條邊 /*有三條邊哦*/
八方小三角（左上，左下，右上，右下）
左右相反成透明 /*設置邊線*/
上下相同給顏色 /*設置邊線*/
送你兩條邊 /*好方便，就兩條邊*/
哥們上代碼：舉個梨子
四方來角之（up，up，up上）來個div盒子，是否可以用其他的容器？（哥們沒試過，夠用就好）
<div class="up"><div/>
.up{
position: absolute;; /*這裡咱可以視情況而定*/
border-left:30px solid transparent; /*口訣，左，右邊成透明*/
border-right:30px solid transparent; /*30px可以控制三角的大小*/
border-bottom:30px solid black; /*口訣，相反線，給顏色*/
width: 0;
height: 0; /*是否加上寬高0，自己試驗哦，博主試過可以不加*/
}
結果是：這樣的（無視小滑鼠）
哥們上代碼（2）
先複習一遍口訣，向上向上走...
然後再來，舉個梨子（八方來角之“left-top，left-top，left-top左上”）
<div class="left-top"><div/>
.left-top{
position: relative;
border-top: 30px solid lawngreen; /*發現沒有上下相同，設置顏色*/
border-right: 30px solid transparent; /*左右相反，給透明*/
width: 0; /*只有兩條邊的設置哦*/
height: 0;
}
效果圖：（完美哦！！）
其中的口訣，可以完全使用，最主要的好處就是可以不用記住源碼，自己手寫的css然後在網頁中完美顯示的感覺就是“這個feel倍爽，倍爽...”
主要的用途：
“導航欄中的小三角指向”
“其他暫時沒有發現，哈哈噠..”
如果小白同志看見這篇文章的時候，就聯繫我吧，菜鳥見小白，哥倆淚汪汪
有幸被大神看見，那是三生有幸，希望指導一二
到這為止，小三角tips的博文就玩了，其中原理可理解也可不理解，網上有一大堆的源碼，直接拿過來用就是了，但是不符合咱可貴的極客精神
來一起念一遍“極客精神，極客精神..”
片尾聲明：
本文的原理是博主自己的收集理解，經過測試完全沒有問題，當然也不排除有其他的方式達到這種效果，各位前端的博友有志同道合的請關註我或者我
要關註你哦
最後的落款：
16-03-10日，
環境還是不錯的，
周圍室友愉快的鬥地主
