如何用CSS繪制三角形和平行四邊形

來源：懂視網責編：小采時間：2020-11-27 20:11:13

如何用CSS繪制三角形和平行四邊形

如何用CSS繪制三角形和平行四邊形:最近在網上看到很多種教程教大家怎么使用CSS繪制圖形，今天給大家總結一下如何用如何用CSS 樣式表來繪制三角形和平行四邊形。感興趣的可以深度研究一下。第一種方法：利用border一個矩形拼接兩個三角形最終制造出一個平行四邊形。為什么使用border可以

推薦度：

點擊下載本文 文檔為doc格式

導讀如何用CSS繪制三角形和平行四邊形:最近在網上看到很多種教程教大家怎么使用CSS繪制圖形，今天給大家總結一下如何用如何用CSS 樣式表來繪制三角形和平行四邊形。感興趣的可以深度研究一下。第一種方法：利用border一個矩形拼接兩個三角形最終制造出一個平行四邊形。為什么使用border可以

最近在網上看到很多種教程教大家怎么使用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 來得到平行四邊形。總體來說，第二種方法相對于第一種代碼量小得多，而且也很好理解。唯一的不足是無法構造像本站的分頁中所使用的梯形。

希望本文對大家有所幫助，其實同理可得，正方形長方形和一些等邊圖形也可以用這種方法做出來。