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


 

入駐博客園兩個月之后的第一篇隨筆,希望能夠做到三個原則:

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; /*否則小三角在block狀態下,會拉滿寬度*/
}

 結果是:這樣的(無視小鼠標)

 

 

 


 

 

哥們上代碼(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日,

環境還是不錯的,

周圍室友愉快的斗地主

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com