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

本文最初發佈於個人我的博客：咀嚼之味

最近在逛某個技術網站的時候，感受文章關鍵詞上的樣式好酷炫啊。因而我將那種寫法照搬到了個人博客中，也許最近逛過我博客的小夥伴已經發現了它出如今哪兒了——分頁的樣式。來張截圖：

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

第一種方法：利用border

第一種方法是藉助border屬性 hack 出三角形，而後經過一個矩形拼接兩個三角形最終制造出一個平行四邊形。爲何使用border能夠產生三角形呢？先來看看一張圖片：

看了圖中的三個小圖形的變化過程，你應該已經清楚了一半。其實 hack 出三角形只須要兩個條件，第一，元素自己的長寬爲0；其次，將不須要的部分經過 border-color 來設置隱藏。經過相似的方法，你還能夠創造出梯形，上圖中的三個圖形的代碼以下。（另附 CodePen 示例）

#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 連接）

//三角形的寬高
$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(...)，下面就來看看源碼吧。

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

<div class="city">上海</div>

因而咱們獲得了這樣的效果：

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

彆着急嘛，咱們的確是把整個 div 進行了歪曲，致使中間的文字也是傾斜的，而這顯然不是咱們所要的效果。因此咱們須要加一個內層元素，並對內層元素作一次逆向的歪曲，從而獲得咱們想要的效果：

實現代碼以下，另附 CodePen 示例

<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 來獲得平行四邊形。整體來講，第二種方法相對於第一種代碼量小得多，並且也很好理解。惟一的不足是沒法構造像本站的分頁中所使用的梯形。但願本文對各位有所幫助。

UPDATE

• **2015.8.18**, @前端農民工 給出了一個 CSS-Tricks 的連接，是關於各類用 CSS 繪製幾何圖形的方法，淺顯易懂，推薦你們看看！