入驻两个月之后的第一篇随笔,希望能够做到三个原则:
One:不浪费自己的时间,
Tow:不浪费读者的时间,
第三就是希望有缘的朋友们多多指教,共度前端快乐的大坑!!!
咱们今天来做一个居家旅行必备的小tips,展现前端老前辈的智慧,积淀的文化...
先来一个小口诀【呆会会用到的,不用着急记住它哦】
四方小三角(上,下,左,右)
尖角反方线,给颜色 /设置边线/
两边夹角线成透明 /设置边线/
参数都相同 /线的参数都一样/
给予三条边 /有三条边哦/
八方小三角(左上,左下,右上,右下)
左右相反成透明 /设置边线/
上下相同给颜色 /设置边线/
送你两条边 /好方便,就两条边/
哥们上代码:举个梨子
四方来角之(up,up,up上)来个div盒子,是否可以用其他的容器?(哥们没试过,够用就好)
<divclass="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左上”)
```<div class="left-top"><div/>```
```.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日,
环境还是不错的,
周围室友愉快的斗地主