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，如下：

相關文章推薦：

CSS3中增加的偽類有哪些及其作用是什麼？

css選擇器有哪些型別？ css常用選擇器的簡單介紹

以上是CSS3中偽元素實現氣泡框的程式碼（before、after）的詳細內容。更多資訊請關注PHP中文網其他相關文章！