个人博客
专注IT梦想的地方

CSS小技巧之:after和:before制作小气泡框体

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

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

直接上代码:

<!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>

DEMO地址:https://www.asni.cn/demo/demo3/index.html

赞(1) 打赏
未经允许,不得转载本站任何文章:智言个人博客 » CSS小技巧之:after和:before制作小气泡框体

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏