如何用 CSS 實現三角形與平行四邊形？

最近在逛某個技術網站的時候，感覺文章關鍵字上的樣式好酷炫啊，分頁的樣式。來張截圖：

你在首頁的底部也可以看到這樣一個分頁欄；你看起來還不錯？下面就來看看這是如何實現的吧~

第一種方法：利用border

第一種方法是藉助border屬性hack 出三角形，然後透過一個矩形拼接兩個三角形最終製造出一個平行四邊形。為什麼使用border可以產生三角形呢？先來看看一張圖片：

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

#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) {

@mixin parallelogram-color($color) {

@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 設定的三角形斜率太小或太大都有可能造成渲染出鋸齒，所以使用起來要多多測試一下不同的寬高所得到的視覺效果如何。

如果你想學習交流html5等web前端技術，想多了解一些前端方面的內容，可以加入我們的QQ學習群：27062964，一起學習交流，提升自己，有學習資料和源碼分享。或是點選連結直接加入群組：

第二種方法：利用transform

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

看到之後覺得好神奇啊，原來還可以只有平行四邊形的外輪廓。 （因為方法一隻能創造填滿效果的平行四邊形）實作起來非常簡單，主要是藉助了transform: skew(...)，下面就來看看原始碼吧。

 

.city {

display: inline-block;

padding: 5px 20px;

border: 1px solid #44a5fc ;

color: #333;

transform: skew(-20deg);

}

 

上海

 

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

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

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

實現程式碼如下，另附CodePen範例

 

.city {

display: inline-block;

padding: 5px 20px;

#border: 1px solid # 44a5fc;

color: #333;

transform: skew(-20deg);

}

.city div {

transform: skew(20deg);

}

 

 

 

 

##上海

 

總結

第一種方法使用 border 屬性hack 出三角形，並透過對三個元素進行拼接最終實現了平行四邊形；而第二種方法則透過 transform: skew 來得到平行四邊形。整體來說，第二種方法相對於第一種程式碼量小得多，而且也很好理解。唯一的不足是無法建構像本站的分頁所使用的梯形。

希望本文對各位有所幫助。

學習過程中遇到什麼問題或想獲取學習資源的話，歡迎加入學習交流群組

#

以上是如何用 CSS 實現三角形與平行四邊形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！