最近在逛某個技術網站的時候，感覺文章關鍵詞上的樣式好酷炫啊。於是我將那種寫法照搬到了我的部落格中，也許最近逛過我部落格的小夥伴已經發現了它出現在哪兒了——分頁的樣式。來張截圖：
你在首頁的底部也可以看到這樣一個分頁欄；是不是看上去還不錯？下面就來看看這是如何實現的吧~
第一種方法：利用border
一個矩形拼接兩個三角形最終制造出一個平行四邊形。為什麼使用border可以產生三角形呢？先來看看一張圖片：
看了圖中的三個小圖形的變化過程，你應該已經清楚了一半。其實 hack 出三角形只需要兩個條件，第一，元素本身的長寬為0；其次，將不需要的部分通過 border-color 來設定隱藏。通過類似的方法，你還可以創造出梯形，上圖中的三個圖形的程式碼如下。（另附 CodePen 示例）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
#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; } |
接下來就要考慮如何拼接出一個平行四邊形了。在border法中，它由三部分組成，分別是左三角形、矩形、右三角形。如果每次繪製平行四邊形都要建立三個元素顯然過於麻煩了，所以在這裡:before和:after偽元素是個不錯的選擇。下面我們實現一下這樣的效果：
為了將三角形與矩形無縫拼接到一起，多處屬性要保持一致，所以使用類似 Less, Sass, Stylus 等 CSS 前處理器來寫這段程式碼會更容易維護，下面給出 Scss 版本的程式碼。（另附 CodePen 連結）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
//三角形的寬高 $height: 24px; $width: 12px; //對平行四邊形三部分的顏色進行賦值 @mixin parallelogram-color($color) { background: $color; &:before { border-color: transparent $color $color transparent; } &:after { border-color: $color transparent transparent $color; } } //單個三角形的樣式 @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 設定的三角形斜率太小或太大都有可能造成渲染出鋸齒，所以使用起來要多多測試一下不同的寬高所得到的視覺效果如何。
第二種方法：利用transform
使用transform來實現平行四邊形的方法是我在逛去啊的時候看到的，效果大概是這個樣子：
看到之後覺得好神奇啊，原來還可以只有平行四邊形的外輪廓。（因為方法一隻能創造填充效果的平行四邊形）實現起來非常簡單，主要是藉助了transform: skew(...)，下面就來看看原始碼吧。
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .city { display: inline-block; padding: 5px 20px; border: 1px solid #44a5fc; color: #333; transform: skew(-20deg); } </style> <div class="city">上海</div> |
於是我們得到了這樣的效果：
看到圖片的你一定是這樣想的：
彆著急嘛，我們的確是把整個 div 進行了歪曲，導致中間的文字也是傾斜的，而這顯然不是我們所要的效果。所以我們需要加一個內層元素，並對內層元素做一次逆向的歪曲，從而得到我們想要的效果：
實現程式碼如下，另附 CodePen 示例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> .city { display: inline-block; padding: 5px 20px; border: 1px solid #44a5fc; color: #333; transform: skew(-20deg); } .city div { transform: skew(20deg); } </style> <div class="city"> <div>上海</div> </div> |
總結
第一種方法使用 border 屬性 hack 出三角形，並通過對三個元素進行拼接最終實現了平行四邊形；而第二種方法則通過 transform: skew 來得到平行四邊形。總體來說，第二種方法相對於第一種程式碼量小得多，而且也很好理解。唯一的不足是無法構造像本站的分頁中所使用的梯形。希望本文對各位有所幫助。