#純CSS畫三角原理解析因為之前做一個頁面出現了很多三角，開始直接用圖片感覺並不是很好用，看著總是怪怪的顏色還很難調整的跟背景一樣，就搜了一波程式碼直接用上了，事後想了一下感覺不知道具體原理是什麼，很奇怪為什麼邊框能設定成三角的樣式。於是搜了一波原理整理如下

1.邊框到底是什麼樣的？

因為很少用到很粗的邊框，而且90%的情況下我們用邊框都是一個顏色的。所以我發現我並不知道邊框到底是什麼樣子的，一直一來我都以為四條邊都是一條線（不要告訴我就我一個人這樣認為）。

實驗了一下才發現邊框越來越粗的時候，很明顯每條邊都是一個梯形

2.如何做出三角？

因為之前看的程式碼都會寫上width: 0; height: 0;當時不理解為什麼，現在很容易就能想到，用極限的思維，當內容大小趨近與零的時候,每個邊就是一個三角了。

這個時候就可以看到三角已經出現，我們要做的就是把其他邊設定為透明的就可以得到我們需要的三角了。

3.還有沒有更多的情況？

通過分別取消邊框發現下面幾種情況：

取消一條邊的時候，與這條邊相鄰的兩條邊的接觸部分會變成直的
當僅有鄰邊時，兩個邊會變成對分的三角
當保留邊沒有其他接觸時，極限情況所有東西都會消失。

4.擴充

明白了這些之後，再看程式碼是不是感覺就很清晰了呢？然後我們就可以做出更多形狀的三角。有了這些形狀再加上旋轉屬性，基本所有的場景都能使用。

直角三角

.box { 
   /* 內部大小 */    width: 0px;
    height: 0px;
    /* 邊框大小 只設定三條邊*/    border-top: #4285f4 solid;
    border-right: transparent solid;
    border-left: transparent solid;
    border-width: 85px;
     /* 其他設定 可有可無*/    margin: 50px;

  }複製程式碼

更小的直角三角形

利用對邊的情況，做出更小的直角三角形

.box { 
   /* 內部大小 */    width: 0px;
    height: 0px;
    /* 邊框大小 只設定兩條邊*/    border-top: #4285f4 solid;
    border-right: transparent solid;
    border-width: 85px;
     /* 其他設定 */    margin: 50px;

  }複製程式碼

等腰銳角三角形

通過更改底邊的長度可以做出各種不同的三角形

.box { 
   /* 內部大小 */    width: 0px;
    height: 0px;
    /* 邊框大小 */    border-top: #4285f4 170px solid;
    border-right: transparent 85px solid;
    border-left: transparent 85px solid;
         /* 其他設定 */    margin: 50px;

  }複製程式碼

對話氣泡

把偽元素設定成三角，再通過定位確定位置，就可以製作出來經典的對話氣泡了。

.bubbly { 
   position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #00ccbb;
    border-radius: 8px;
    width: 200px;
    padding: 40px 10px;
    text-align: center;
    color: white;
    font-size: 20px;
.bubbly:after { 
   content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    border: 34px solid transparent;
    border-top-color: #00ccbb;
    border-bottom: 0;
    border-left: 0;
    margin: 0 0 -34px -17px;

  }複製程式碼

總結

通過對四條邊的長度的設定，還可以做出各種各樣的三角形，幾乎所有三角的形狀都可以設定出來。另外還可以通過設定寬高中的一項為0另一個不為0，來設定出體形的形狀，大家可以自由實驗

來源：https://juejin.im/post/5a957bcf6fb9a0635b535812

純CSS畫三角原理解析