最近在逛某個(gè)技術(shù)網(wǎng)站的時(shí)候，感覺文章關(guān)鍵詞上的樣式好酷炫啊，分頁的樣式。來張截圖：
你在首頁的底部也可以看到這樣一個(gè)分頁欄；是不是看上去還不錯(cuò)？下面就來看看這是如何實(shí)現(xiàn)的吧~
第一種方法：利用border
第一種方法是借助border屬性 hack 出三角形，然后通過一個(gè)矩形拼接兩個(gè)三角形最終制造出一個(gè)平行四邊形。為什么使用border可以產(chǎn)生三角形呢？先來看看一張圖片：
看了圖中的三個(gè)小圖形的變化過程，你應(yīng)該已經(jīng)清楚了一半。其實(shí) hack 出三角形只需要兩個(gè)條件，第一，元素本身的長(zhǎng)寬為0；其次，將不需要的部分通過 border-color 來設(shè)置隱藏。通過類似的方法，你還可以創(chuàng)造出梯形，上圖中的三個(gè)圖形的代碼如下。
#first {
width: 20px;
height: 20px;
border-width: 10px;
border-style: solid;
border-color: red green blue brown;
}
#second {
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: red green blue brown;
}
#third {
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: red transparent transparent transparent;
}
接下來就要考慮如何拼接出一個(gè)平行四邊形了。在border法中，它由三部分組成，分別是左三角形、矩形、右三角形。如果每次繪制平行四邊形都要?jiǎng)?chuàng)建三個(gè)元素顯然過于麻煩了，所以在這里:before和:after偽元素是個(gè)不錯(cuò)的選擇。下面我們實(shí)現(xiàn)一下這樣的效果：
為了將三角形與矩形無縫拼接到一起，多處屬性要保持一致，所以使用類似 Less, Sass, Stylus 等 CSS 預(yù)處理器來寫這段代碼會(huì)更容易維護(hù)，下面給出 Scss 版本的代碼。
//三角形的寬高
$height: 24px;
$width: 12px;
//對(duì)平行四邊形三部分的顏色進(jìn)行賦值
@mixin parallelogram-color($color) {
background: $color;
&:before { border-color: transparent $color $color transparent; }
&:after { border-color: $color transparent transparent $color; }
}
//單個(gè)三角形的樣式
@mixin triangle() {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
border-style: solid;
border-width: $height/2 $width/2;
top: 0;
}
//平行四邊形的樣式
.para {
display: inline-block;
position: relative;
padding: 0 10px;
height: $height;
line-height: $height;
margin-left: $width;
color: #fff;
&:after {
@include triangle();
right: -$width;
}
&:before {
@include triangle();
left: -$width;
}
@include parallelogram-color(red);
}
需要注意的是，如果通過?$height、$width?設(shè)置的三角形斜率太小或太大都有可能造成渲染出鋸齒，所以使用起來要多多測(cè)試一下不同的寬高所得到的視覺效果如何。
如果你想學(xué)習(xí)交流html5等web前端技術(shù)，想多了解一些前端方面的內(nèi)容，可以加入我們的QQ學(xué)習(xí)群：27062964，一起學(xué)習(xí)交流，提升自己，有學(xué)習(xí)資料和源碼分享?；蛘唿c(diǎn)擊鏈接直接加入群：https://jq.qq.com/?_wv=1027&k=48DmPsZ
第二種方法：利用transform
使用transform來實(shí)現(xiàn)平行四邊形的方法，效果大概是這個(gè)樣子：
看到之后覺得好神奇啊，原來還可以只有平行四邊形的外輪廓。（因?yàn)榉椒ㄒ恢荒軇?chuàng)造填充效果的平行四邊形）實(shí)現(xiàn)起來非常簡(jiǎn)單，主要是借助了transform: skew(...)，下面就來看看源碼吧。
.city {
display: inline-block;
padding: 5px 20px;
border: 1px solid #44a5fc;
color: #333;
transform: skew(-20deg);
}
于是我們得到了這樣的效果：
看到圖片的你一定是這樣想的：
別著急嘛，我們的確是把整個(gè) div 進(jìn)行了歪曲，導(dǎo)致中間的文字也是傾斜的，而這顯然不是我們所要的效果。所以我們需要加一個(gè)內(nèi)層元素，并對(duì)內(nèi)層元素做一次逆向的歪曲，從而得到我們想要的效果：
實(shí)現(xiàn)代碼如下，另附CodePen 示例
.city {
display: inline-block;
padding: 5px 20px;
border: 1px solid #44a5fc;
color: #333;
transform: skew(-20deg);
}
.city div {
transform: skew(20deg);
}
總結(jié)
第一種方法使用?border?屬性 hack 出三角形，并通過對(duì)三個(gè)元素進(jìn)行拼接最終實(shí)現(xiàn)了平行四邊形；而第二種方法則通過?transform: skew?來得到平行四邊形?？傮w來說，第二種方法相對(duì)于第一種代碼量小得多，而且也很好理解。唯一的不足是無法構(gòu)造像本站的分頁中所使用的梯形。希望本文對(duì)各位有所幫助。
如果你想學(xué)習(xí)交流html5等web前端技術(shù)，想多了解一些前端方面的內(nèi)容，可以加入我們的QQ學(xué)習(xí)群：27062964，一起學(xué)習(xí)交流，提升自己，有學(xué)習(xí)資料和源碼分享?；蛘唿c(diǎn)擊鏈接直接加入群：https://jq.qq.com/?_wv=1027&k=48DmPsZ
