純CSS畫三角原理解析

純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，來設置出體形的形狀，你們能夠自由實驗