首頁 > web前端 > css教學 > 主體

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

不言
發布: 2018-08-09 16:14:40
原創
2583 人瀏覽過

這篇文章帶給大家的內容是關於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)

相關文章推薦:

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

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!