最近好像特别迷恋使用这些小技巧。反正闲来无事,就随便研究研究前端这些东西。发现越发的喜欢啊。
首先申明,代码均未做优化处理等。
直接上代码:
Demo-css3body{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属性!