知识点整理之css气泡框
1、气泡框构成——三角形箭头+容器
其中 三角形的实现：上下左右四个方向的三角形实现方式；
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>上下左右三角形</title> 6 <style type="text/css"> 7 body{ background:#000; font-family:"微软雅黑"; color:#fff; font-weight:normal;} 8 .top{ 9 width:0; 10 border-bottom:30px solid #abcdef; 11 border-left:30px solid transparent; 12 border-right:30px solid transparent; 13 } 14 .bottom{ 15 width:0; 16 border-top:30px solid #abcdef; 17 border-left:30px solid transparent; 18 border-right:30px solid transparent; 19 } 20 .left{ 21 width:0; 22 border-right:30px solid #abcdef; 23 border-top:30px solid transparent; 24 border-bottom:30px solid transparent; 25 } 26 .right{ 27 width:0; 28 border-left:30px solid #abcdef; 29 border-top:30px solid transparent; 30 border-bottom:30px solid transparent; 31 } 32 33 </style> 34 </head> 35 36 <body> 37 <h3>朝上三角形：</h3> 38 <div class="top"></div> 39 <h3>朝下三角形：</h3> 40 <div class="bottom"></div> 41 <h3>朝左三角形：</h3> 42 <div class="left"></div> 43 <h3>朝右三角形：</h3> 44 <div class="right"></div> 45 46 </body> 47 </html>
2、容器的实现
1 <div class="content"></div>
容器的css样式：
1 .content{ 2 position:relative; 3 300px; 4 height:80px; 5 line-height:60px; 6 background:#D6E29A; 7 border-radius:4px; 8 border:1px solid #AEBD30; 9 }
3、箭头+容器=气泡
在容器内绘制一个三角形
<div class="content"> <div class="cac_top"></div> </div>
容器内三角形.cac_top的样式为：
1 .cac_top{ 2 0; 3 border-top:20px solid #D6E29A; 4 border-left:20px solid transparent; 5 border-right:20px solid transparent; 6 position:absolute; 7 bottom:-20px; 8 left:100px; 9 10 }
此时气泡的样子为：
不难发现小三角并没有被边框，我们需要在div内再添加一个小三角，将其背景色设置成容器边框的颜色，充当三角的边框，具体代码如下：
1 <div class="content"> 2 <div class="cac_bg"></div><!-- 背景三角 --> 3 <div class="cac_bder"></div><!-- 边框三角 --> 4 </div>
css为：
1 .cac_bder{ 2 0; 3 border-top:20px solid #AEBD30; 4 border-left:20px solid transparent; 5 border-right:20px solid transparent; 6 position:absolute; 7 bottom:-20px; 8 left:100px; 9 z-index:1; 10 11 } 12 .cac_bg{ 13 0; 14 border-top:19px solid #D6E29A; 15 border-left:19px solid transparent; 16 border-right:19px solid transparent; 17 position:absolute; 18 bottom:-19px; 19 left:101px; 20 z-index:2; 21 22 }
此时气泡的样子为：
完整代码如下：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>上下左右三角形</title> 6 <style type="text/css"> 7 body{ background:#fff; font-family:"微软雅黑"; color:#333; font-weight:normal;} 8 .top{ 9 width:0; 10 border-bottom:30px solid #abcdef; 11 border-left:30px solid transparent; 12 border-right:30px solid transparent; 13 } 14 .bottom{ 15 width:0; 16 border-top:30px solid #abcdef; 17 border-left:30px solid transparent; 18 border-right:30px solid transparent; 19 } 20 .left{ 21 width:0; 22 border-right:30px solid #abcdef; 23 border-top:30px solid transparent; 24 border-bottom:30px solid transparent; 25 } 26 .right{ 27 width:0; 28 border-left:30px solid #abcdef; 29 border-top:30px solid transparent; 30 border-bottom:30px solid transparent; 31 } 32 .content{ 33 position:relative; 34 width:300px; 35 height:80px; 36 line-height:60px; 37 background:#D6E29A; 38 border-radius:4px; 39 border:1px solid #AEBD30; 40 } 41 .cac_bder{ 42 width:0; 43 border-top:20px solid #AEBD30; 44 border-left:20px solid transparent; 45 border-right:20px solid transparent; 46 position:absolute; 47 bottom:-20px; 48 left:100px; 49 z-index:1; 50 51 } 52 .cac_bg{ 53 width:0; 54 border-top:19px solid #D6E29A; 55 border-left:19px solid transparent; 56 border-right:19px solid transparent; 57 position:absolute; 58 bottom:-19px; 59 left:101px; 60 z-index:2; 61 62 } 63 64 </style> 65 </head> 66 67 <body> 68 <h3>朝上三角形：</h3> 69 <div class="top"></div> 70 <h3>朝下三角形：</h3> 71 <div class="bottom"></div> 72 <h3>朝左三角形：</h3> 73 <div class="left"></div> 74 <h3>朝右三角形：</h3> 75 <div class="right"></div> 76 <h3>div容器</h3> 77 <div class="content"> 78 <div class="cac_bg"></div><!-- 背景三角 --> 79 <div class="cac_bder"></div><!-- 边框三角 --> 80 </div> 81 </body> 82 </html>