這篇文章帶給大家的內容是關於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中偽元素實現氣泡框的程式碼(before、after)的詳細內容。更多資訊請關注PHP中文網其他相關文章!