最近在網路上看到很多教學教大家怎麼使用CSS繪製圖形，今天要跟大家總結如何用 如何用CSS 樣式表來繪製三角形和平行四邊形。有興趣的可以深度研究一下。
第一種方法：利用border
一個矩形拼接兩個三角形最終製造出一個平行四邊形。為什麼使用border可以產生三角形呢？先來看看一張圖片：
看了圖中的三個小圖形的變化過程，你應該已經清楚了一半。其實 hack 出三角形只需要兩個條件，第一，元素本身的長寬為0；其次，將不需要的部分透過 border-color 來設定隱藏。透過類似的方法，你還可以創造出梯形，上圖中的三個圖形的程式碼如下。 （另附 CodePen 範例，http://codepen.io/jerryzou/pen/mJYJym ）
#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 鏈接，http://codepen.io/jerryzou/pen/ZGNGWZ?editors=110）
//三角形的宽高
$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 範例（http://codepen.io/jerryzou/pen/BNeNwV?editors=110）
<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 來得到平行四邊形。整體來說，第二種方法相對於第一種程式碼量小得多，而且也很好理解。唯一的不足是無法建構像本站的分頁所使用的梯形。
希望這篇文章對大家有幫助，其實同理可得，正方形長方形和一些等邊圖形也可以用這種方法做出來。
推薦閱讀：
以上是如何用CSS 繪製三角形和平行四邊形的詳細內容。更多資訊請關注PHP中文網其他相關文章！
