你在網頁底部分頁看到這樣的效果是不是看上去還不錯？下面就來看看這是如何實現的吧~

一個矩形拼接兩個三角形最終制造出一個平行四邊形。為什麼使用border可以産生三角形呢？先來看看一張圖片：

看了圖中的三個小圖形的變化過程，你應該已經清楚了一半。其實 hack 出三角形隻需要兩個條件，第一，元素本身的長寬為0；其次，将不需要的部分通過 border-color 來設置隐藏。通過類似的方法，你還可以創造出梯形，上圖中的三個圖形的代碼如下

CSS

#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 版本的代碼，其他預處理代碼類似

//三角形的寬高 $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 { @includetriangle(); right:-$width; } &:before { @include triangle(); left:-$width; } @include parallelogram-color(red); }

需要注意的是，如果通過 $height、$width 設置的三角形斜率太小或太大都有可能造成渲染出鋸齒，所以使用起來要多多測試一下不同的寬高所得到的視覺效果如何。

使用transform來實現平行四邊形的方法效果大概是這個樣子

原來還可以隻有平行四邊形的外輪廓。（因為方法一隻能創造填充效果的平行四邊形）實現起來非常簡單，主要是借助了transform: skew(...)，下面就來看看源碼吧

<style> .city { display:inline-block; padding:5px 20px; border:1px solid #44a5fc; color:#333; transform:skew(-20deg); } </style> <div class="city">上海</div>

于是我們得到了這樣的效果：

看到圖片的你一定是這樣想的：

别着急嘛，我們的确是把整個 div 進行了歪曲，導緻中間的文字也是傾斜的，而這顯然不是我們所要的效果。所以我們需要加一個内層元素，并對内層元素做一次逆向的歪曲，從而得到我們想要的效果：

實現代碼如下

<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 來得到平行四邊形。總體來說，第二種方法相對于第一種代碼量小得多，而且也很好理解。唯一的不足是無法構造像本站的分頁中所使用的梯形。希望本文對各位有所幫助。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!