虎扯：纯css3各方向小三角的制作原理分析

入驻两个月之后的第一篇随笔，希望能够做到三个原则：
One：不浪费自己的时间，
Tow：不浪费读者的时间，
第三就是希望有缘的朋友们多多指教，共度前端快乐的大坑！！！

---

咱们今天来做一个居家旅行必备的小tips，展现前端老前辈的智慧，积淀的文化...
先来一个小口诀【呆会会用到的，不用着急记住它哦】
四方小三角（上，下，左，右）
尖角反方线，给颜色 /设置边线/
两边夹角线成透明 /设置边线/
参数都相同 /线的参数都一样/
给予三条边 /有三条边哦/

八方小三角（左上，左下，右上，右下）
左右相反成透明 /设置边线/
上下相同给颜色 /设置边线/
送你两条边 /好方便，就两条边/

---

哥们上代码：举个梨子
四方来角之（up，up，up上）来个div盒子，是否可以用其他的容器？（哥们没试过，够用就好）

borderleft:30pxsolidtransparent;  
/*口诀，左，右边成透明*/      
border-right:30px solid transparent;  
/*30px可以控制三角的大小*/
border-bottom:30px solid black;  
/*口诀，相反线，给颜色*/   
width: 0;  height: 0;
 /*否则小三角在block状态下，会拉满宽度*/}```

结果是：这样的（无视小鼠标）


![871918-20160310134802179-1613135161.jpg](http://upload-images.jianshu.io/upload_images/3037017-836923b2cb4bf149.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

****
哥们上代码（2）
先复习一遍口诀，向上向上走...
然后再来，举个梨子（八方来角之“left-top，left-top，left-top左上”）

```
```

```.left-top{position: relative;   border-top: 30px solid lawngreen;  
/*发现没有上下相同，设置颜色*/  
border-right: 30px solid transparent; 
/*左右相反，给透明*/      
width: 0;      
/*只有两条边的设置哦*/
height: 0;}```

效果图：（完美哦！！）

![871918-20160310135940600-584478215.jpg](http://upload-images.jianshu.io/upload_images/3037017-23a420d9af353310.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


其中的口诀，可以完全使用，最主要的好处就是可以不用记住源码，自己手写的css然后在网页中完美显示的感觉就是“这个feel倍爽，倍爽...”

 

主要的用途：
“导航栏中的小三角指向”
“其他暂时没有发现，哈哈哒..”
如果小白同志看见这篇文章的时候，就联系我吧，菜鸟见小白，哥俩泪汪汪
有幸被大神看见，那是三生有幸，希望指导一二

到这为止，小三角tips的博文就玩了，其中原理可理解也可不理解，网上有一大堆的源码，直接拿过来用就是了，但是不符合咱可贵的极客精神
 来一起念一遍“极客精神，极客精神..”

最后的落款：
16-03-10日，
环境还是不错的，
周围室友愉快的斗地主