最近好像特别迷恋使用这些小技巧。反正闲来无事，就随便研究研究前端这些东西。发现越发的喜欢啊。
首先申明，代码均未做优化处理等。
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo-css3</title>
<style media="screen">
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;
}
</style>
</head>
<body>
<div class="demo">
我是一个气泡，我有很多CSS3属性，希望大家可以支持我，谢谢大家了。
</div>
<div></div>
<div class="demo2">
我是第二个气泡，我也有很多CSS3属性！
</div>
</body>
</html>
评论前必须登录！
注册