怎样制作泡泡html页面,CSS小技巧之:after和:before制作小气泡框体

最近好像特别迷恋使用这些小技巧。反正闲来无事，就随便研究研究前端这些东西。发现越发的喜欢啊。

首先申明，代码均未做优化处理等。

直接上代码：

Demo-css3

body{margin: 0; padding: 0;}

/*第一个气泡demo*/

.demo,.demo2{

background-color: #3c9;

padding: 8px;

display: inline-block;

position: relative;

left: 15px;

top: 5px;

z-index: 99;

color: #fff;

font-weight: 100;

font-size: 14px;

}

.demo::before{

content: '';

display: inline-block;

position: absolute;

width: 20px;

height: 15px;

background-color: #3c9;

border-top-right-radius: 10% 50%;

border-top-left-radius: 100% 50%;

top: 10px;

left: -15px;

z-index: 1;

}

.demo::after{

content: '';

display: inline-block;

position: absolute;

border-top-left-radius: 50% 50%;

border-top-right-radius: 50% 50%;

width: 25px;

height: 15px;

background-color: #fff;

top: 15px;

left: -25px;

z-index: 2;

}

/* 第二个气泡demo*/

.demo2{

background-color: #fff;

margin-top: 20px;

border: 1px solid #f66;

color: #333;

font-weight: 400;

}

.demo2::before{

content: '';

position: absolute;

width: 0;

height: 0;

border-right: 10px solid #f66;

border-top: 6px solid transparent;

border-bottom: 6px solid transparent;

left: -10px;

top: 11px;

}

.demo2::after{

content: '';

position: absolute;

width: 0;

height: 0;

border-right: 10px solid #fff;

border-top: 6px solid transparent;

border-bottom: 6px solid transparent;

left: -8px;

top: 11px;

}

我是一个气泡，我有很多CSS3属性，希望大家可以支持我，谢谢大家了。

我是第二个气泡，我也有很多CSS3属性！