純CSS實現氣泡框

在工作中，我們可能會遇到氣泡框相關的需求，如下圖：

這個氣泡框我們可以使用純CSS代碼來實現。接下來跟我一起一步步實現吧！

用CSS畫三角形

用CSS畫個三角形，相信大家都很熟悉了吧。主要思路：

• 將元素的的寬高設置爲0；
• 然後設置相應的邊框即可實現。詳細來講就是給某一方向的邊框添加寬度以及顏色，然後將其旁邊兩個方向（或一個）的邊框設置高度並且顏色設置爲transparent（即兩邊的顏色爲透明）。

如下例子：
HTML代碼:

<div class="root"></div>

CSS代碼：

.root {
    height: 0;
    width: 0;
    border-top: 50px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

對應的效果：

爲了讓不瞭解的同學看清楚點，我們把四個邊框的顏色都填充上：

.root {
    height: 0;
    width: 0;
    border-top: 50px solid red;
    border-left: 50px solid yellow;
    border-right: 50px solid blue;
    border-bottom: 50px solid green;
}

效果如下：

氣泡框

從上面我們已經知道了怎麼用CSS畫出三角形了，但是看我們開頭的那個例子，那個尖尖的三角形是斜着的，我們僅僅通過設置border的寬度是達不到這種效果的，那該怎麼辦呢？

其實，我們弄一個非等腰的三角形，然後再通過旋轉不就可以達到我們的效果了？嘿嘿，這時transform屬性中的rotate()（不清楚的參考這）排上用場了！

正三角形的氣泡框

首先我們先實現正的小角（這裏我們用僞元素實現）的氣泡框：
CSS代碼：

.root {
    height: 100px; /**/
    width: 300px;
    background-color: #FF7315;
    position: relative; /* 將父元素設置相對定位，是僞元素可以根據父元素進行定位*/ 
    margin: 300px auto;
}
.root::after {
    content: '';
    position: absolute; /* 通過絕對定位，設置 top、left、right、bottom 相關值，我們定位到想放置三角形的位置 */
    top: 100px;
    left: 120px;
    border-top: 30px solid red; /* 爲了看得更清楚，這裏先設置一個與框框不同的顏色 */
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
}

效果如下：

斜三角形的氣泡框

這時我們只需設置兩條邊框就行了，然後通過調整邊框的寬度以及旋轉的角度（transform: rotate()）以及對應的位置（top、left）來達到我們想要的效果：

.root::after {
    content: '';
    position: absolute; 
    top: 80px;
    left: 120px;
    border-top: 60px solid red;
    border-left: 40px solid transparent;
    transform: rotate(-30deg);
}

效果如下：

最後我們再把三角形的顏色設置成和方框的顏色一樣即可：
最終完整的樣式：

.root::after {
    content: '';
    position: absolute; 
    top: 80px;
    left: 120px;
    border-top: 60px solid #FF7315;
    border-left: 40px solid transparent;
    transform: rotate(-30deg);
}

效果：

總結

• 用CSS畫三角形的方式：通過將元素的的寬高設置爲0，再給某一方向的邊框添加寬度以及顏色，然後將其旁邊兩個方向的邊框（或一個）設置高度並且顏色設置爲transparent（即兩邊的顏色爲透明）。
• 氣泡框：通過transform: rotate()將三角形進行旋轉，並將三角形設置成跟大框一樣的顏色再配合定位屬性的調整，我們即可實現我們想要的氣泡框效果。