CSS3中偽元素實現氣泡框的程式碼（before、after）-css教學-PHP中文網

CSS3中偽元素實現氣泡框的程式碼（before、after）

不言

發布： 2018-08-09 16:14:40

原創

2638 人瀏覽過

這篇文章帶給大家的內容是關於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: &#39;&#39;;            
            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
CSS3中偽元素實現氣泡框的程式碼（before、after）

css程式碼如下：

.wrap::before{
            position: absolute;            
            content: &#39;&#39;;            
            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: &#39;&#39;;            
                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: &#39;&#39;;            
                    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中偽元素實現氣泡框的程式碼（before、after）