標籤：

有誰能詳細講一下css如何畫出一個三角形？怎麼想都想不懂？

12-08

這是一個普通的 div ，一個邊長為 100px 的正方形，border 寬度為 10px， 沒有任何技術含量，地球人都會畫。

我們知道 border 是分為 top、right、bottom、left 的，那麼這個矩形的四個邊是怎樣劃分的呢？

顯然，要想公平地分割四條邊框，只有這樣：

所以我們如果把上、左、右三條邊隱藏掉（顏色設為 transparent），會怎樣呢？

吶，這就是個梯形了！感覺離革命勝利很近了是不是！
仔細觀察一下這個梯形，和三角形有神馬區別呢？
對！上面多了一條邊！
上面這條邊有什麼特點呢？

它的長度剛好等於 div 的寬度！

所以我們要把這個 div 的寬度縮小！
多小合適呢？
當然是 0 啦！

三角形粗來了！！！！！！！

好像太小了點，怎麼把它放大捏？

很簡單，我們把 border 的寬度擴大，
怎麼擴大呢？
顯然這條底邊和上邊已經沒什麼關係了，
上邊唯一的作用就是影響三角形頂點到 div 上邊緣的距離。
所以我們只需要擴大左、下、右這三條邊。

下邊的 width 控制了三角形的高（150px）
左右兩邊的 width 分別控制了三角形的底邊長的兩部分（加起來共 200px）

再舉個例子，如果把右邊 width 設為 0

就是個直角三角形了~

利用相鄰的兩個三角形還可以拼出鈍角三角形~

最後放個福利：CSS三角形產生器

@Vkki 的回答已經比較詳細，我這裡就用圖講解下分解動作好了，算是班門弄斧了。
首先我們來看下一個 標準的 box model 的 border 是怎樣的：

每部分的border，只有一個小梯形，以 border-left 為例，所佔的部分由兩條對角線（部分），以及上下底組成。空白的中間部分由 content 和 padding 組成。接著往下看（這裡我們默認 padding 都為 0px），如果我們把 width 設置為 0px 之後，這個 box model會有怎樣的變化：

你會發現，怎麼 border-top 和 border-bottom 已經變成一個三角形啦，然後接著把 height 設置為 0px呢？

現在這個圖形就有點像 @wangxf 同學演示的了。css 畫三角形的原理就是上面講到的，所做就是需要設置 width: 0px; height: 0px，然後設置諸如合理 border-(left|top|bottom|right)-width 以及對應的顏色，然後再把你想要隱藏的隱藏就行了，題主可以試著想一下，如果沒有 border-top 或者 border-bottom 或者 border-left 或者 border-right （設置相應的 width 為 0px），上面的圖形會接著怎麼改變，可以到這裡來嘗試一下 Edit fiddle - JSFiddle，還可以想下如果同時沒有 border-top 和 border-bottom 會是怎麼樣的。

關於本問題的答案，@Vkki 答的很贊！！我歪個樓，引申一下這個問題。

我之前在自己的博客發了篇文章：《用 CSS 實現三角形與平行四邊形》
這篇文章轉發到 http://div.io 上後， @張雲龍 給了一個超贊的鏈接，在這也分享一下：The Shapes of CSS

  • 想知道怎麼用 CSS 畫一個愛心？ 請看上面這個鏈接
  • 想知道怎麼用 CSS 畫一個五角星？ 請看上面這個鏈接
  • 想知道怎麼用 CSS 畫一個無窮符號？ 請看上面這個鏈接
  • 想知道怎麼用 CSS 畫一個吃豆人？ 請看上面這個鏈接
  • 想知道怎麼用 CSS 畫一個雞蛋？ 請看上面這個鏈接
  • 請看上面這個鏈接

========================================

另外附上《用 CSS 實現三角形與平行四邊形》原文，補充說明一下 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(...)，下面就來看看源碼吧。

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

首先得畫一個三角形，這頗有難度。

不過我想到一條妙計：

&▲&

效果如圖：

你想改變它的角度，用 transform 里的 rotate，比如 50 °：

transform: rotate(50deg);

效果如圖：

你覺得太小了，想放大一點，可以用 transform 裡面的 scale 。或者像我這樣：

font-size: 80px;

效果如圖：

你不想要正三角形，想要不規則的，用 scaleX 和 scaleY 或者 scale(x, y)

transform: scale(1.5,2);

效果如圖：

可你有木有發現，不管怎麼樣，這個三角形都是等腰三角形，那麼我不要等腰的，怎麼辦呢？可以用 transform 的 -3d 系列函數實現！

transform: rotate3d(0.5,0.8,0.1,50deg);

效果如圖：

現在你已經可以擺出任何形狀的三角形了，給它上色吧！

color: blue;

（或者你也可以用 background 裡面的系列函數把它變得五彩繽紛的！）
然後如果要變成空心的怎麼辦呢？
這是一個難題。
...
...
...
...
...
我有一個很好的解決方案。

&△&

簡直是經濟又實惠，最終效果：

系列代碼：

div{
transform: rotate3d(0.5,0.8,0.1,50deg) scale(1.5,2);
-ms-transform: rotate3d(0.5,0.8,0.1,50deg) scale(1.5,2); /* IE 9 */
-moz-transform: rotate3d(0.5,0.8,0.1,50deg) scale(1.5,2); /* Firefox */
-webkit-transform: rotate3d(0.5,0.8,0.1,50deg) scale(1.5,2); /* Webkit 內核 */
-o-transform: rotate3d(0.5,0.8,0.1,50deg) scale(1.5,2); /* Opera */
font-size: 80px;
color: blue;
}

完美！

樓上的回答已經非常詳細了，一般這樣的方法會用在對話框的那個小箭頭那裡。
但是因為這種方法只能畫出直角等腰三角形，而題主也並沒有說是否需要其他類型的三角形。
所以我在之前的基礎上給出多一些選擇。
--------------------------------------------------------------------
# 先多謝之前知友的回答 ヾ (o ° ω ° O ) ノ?
--------------------------------------------------------------------
【直角等腰三角形】
建立一個沒有高和寬，只有border的div。
如圖：

div {
margin:auto;
border-top:100px solid #EEE;
border-left:100px solid #EEE;
border-right:100px solid #EEE;
border-bottom:100px solid #333;
width: 0px;
height: 0px;
}

-------------------------------------------------------------------
【銳角三角形】
這裡的主要思想是在div的基礎上加入2D偏轉，也就是 transform屬性的shewX()方法。
如圖：

div {
margin:auto;
border-top:100px solid #EEE;
border-left:100px solid #EEE;
border-right:100px solid #EEE;
border-bottom:100px solid #333;
width: 0px;
height: 0px;

/* 這是上邊圖的 */
transform: skewX(20deg);
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);

/* 這是中間圖的 */
transform: skewX(20deg);
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);

/* 這是下邊圖的 */
transform: skew(20deg, -30deg);
-ms-transform: skew(20deg, -30deg);
-webkit-transform: skew(20deg, -30deg);
}

-------------------------------------------------------------------
【鈍角三角形】
這裡的主要思想是3D變化，也就是transform屬性的rotate()方法。
如圖：

div {
margin:auto;
border-top:100px solid #EEE;
border-left:100px solid #EEE;
border-right:100px solid #EEE;
border-bottom:100px solid #333;
width: 0px;
height: 0px;

transform: rotateX(45deg);
-ms-transform: rotateX(45deg);
-webkit-transform: rotateX(45deg);
}

或者我們仍然可以活用skewX()方法：

div {
margin:auto;
width:0px;
height:0px;
border-top:0px solid transparent;
border-left:0px solid transparent;
border-right:200px solid #EEE;
border-bottom:200px solid #333;

-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
}

-----------------------------------------------------
那麼題主可以想一想這個三角形該如何變換？

提示：rotate3d();
~
~
~
~
~
~
請點贊！

baixing/BXT · GitHub 正好今天BXT的第一期 @CSS魔法 的演講里就包含這個部分的內容，在上海的同學可以到現場去聽。

首先來一個div

&&

然後對div設置樣式

div{
width:0;
height:0;
border:100px solid;
border-color:red green blue yellow;
}

得出一個圖形

然後根據你的需要高就是border-top,border-bottom，寬就是border-left,border-right，根據你的形狀自由組合，設置border的顏色為transparent就行了

content: "▲";

樓上基本已經把css畫三角形的思路講解清楚了,我這裡來歪個樓
用css畫其他有趣圖形(一個國外腦洞大開的FEblog)
圖有點大

完整版本==&>The Shapes of CSS

用CSS代碼寫出的各種形狀圖形的方法

@Vkki 的答案已經很詳細了嗷，但是作為一個代碼潔癖強迫症晚期來講，表示對HTML中無意義的效果代碼完全忍不了啊喂！！

這是什麼鬼？！

這又是什麼鬼？！！

所以我推薦有強迫症的小夥伴在項目中用以下這種方式實現三角號等等各種小物件
實現起來是醬紫的：

效果是醬紫滴：

有木有感覺天空突然晴朗了起來？世界突然就美好了起來？！！啊哈哈哈~~~

大概嘛，是這個樣子的：

（請將以下代碼保存至HTML文件並由支持HTML5屬性的瀏覽器進行訪問）

&
&
&
&
&
&