CSS3中虛擬元素實現氣泡框的代碼（before、after）

本篇文章給大家帶來的內容是關於CSS3中虛擬元素實現氣泡框的代碼（before、after），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

氣泡框的原理其實也就是普通邊框+三角形，CSS實現三角形也是利用了border屬性
1、三角形是實心的

html代碼：

<div class="wrap"></div>

css代碼：

.wrap{            position: relative;                        width: 600px;                        height: 400px;                        border: 10px solid #3377aa;                        border-radius: 20px;            }.wrap::before{            position: absolute;                        content: '';                        width: 0;                        height: 0;                        border-width: 40px 20px;              /*上下、左右的border值*/            border-style: solid;                        border-color: #3377aa transparent transparent;            /*只設定上面border的顏色，左右和下面都設定為透明，會出現一個倒三角*/            bottom: -80px;             /*以下給三角形定位，使其處於底部置中處*/            left: 50%;                        margin-left: -20px;         }

：

2、如果需要三角形是空心的，如下，需要同時使用before和after

css代碼如下：

.wrap::before{            position: absolute;                        content: '';                        width: 0;                        height: 0;                        border-width: 40px 20px;                        border-style: solid;                        border-color: #3377aa transparent transparent;                        bottom: -80px;                        left: 50%;                        margin-left: -20px;                }.wrap::after{                            position: absolute;                            content: '';                            width: 0;                            height: 0;                            border-width: 40px 20px;                            border-style: solid;                            border-color: #fff transparent transparent;                /*白色的倒三角*/            bottom: -60px;             /*位置和往上一些*/            left: 50%;                        margin-left: -20px;                 }

簡寫的話是這樣：

        .wrap::before,                .wrap::after{                    position: absolute;                                content: '';                                width: 0;                                height: 0;                                border-width: 40px 20px;                                border-style: solid;                                border-color: #3377aa transparent transparent;                                bottom: -80px;                                left: 50%;                                margin-left: -20px;                        }        .wrap::after{                    border-color: #fff transparent transparent;                                bottom: -60px;                      }

原理就是將兩個三角形疊加，下面的三角形border顏色和外面的框一致，上面的border顏色設定為白色，為了能更好看清，我將body顏色設為#ccc，如下：