CSS纯样式实现箭头、对话框等形状

在使用第三方框架bootstrap的时候，本以为其是图片实现的小箭头，后来使用开发工具查看是用CSS来实现的，现记录如下：

之前都没仔细去观注过其原理，都是拿来使用，在实现小箭头之前需要了解下CSS的before跟after伪类的用法，这个链接有详细说明http://www.webhek.com/understanding-pseudo-element-before-and-after

理解完上面伪类的用法后，下面进入主题，直接贴上代码，

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>border test page</title>
 6     <style>
 7         body{background: #fff;}
 8 
 9         .borderbottom{
10             width:0px;
11             height: 0px;
12             border-width: 8px;
13             border-style: solid;
14             border-color: transparent transparent #333 transparent;
15             position: absolute;
16             top: 10px;
17         }
18         .borderballoon{
19             width: 200px;
20             height: 80px;
21             background: lightgreen;
22             border-radius: 5px;
23             position: relative;
24             top: 30px;
25         }
26         .borderballoon:after{
27             content: "";
28             position: absolute;
29             border-style: solid;
30             border-color: lightgreen transparent transparent;
31             border-width: 10px;
32             bottom: -20px;
33             right:40px;
34         }
35         .flatballoon{
36             width: 200px;
37             height: 100px;
38             border: 1px solid #ccc;
39             border-radius: 5px;
40             position: relative;
41             top: 60px
42         }
43         .flatballoon:after{
44             content: "";
45             position: absolute;
46             border-style: solid;
47             border-color: #ccc transparent transparent;
48             border-width: 10px;
49             bottom: -20px;
50             right:40px;
51         }
52         .flatballoon:before{
53             content: "";
54             position: absolute;
55             border-style: solid;
56             border-color: white transparent transparent;
57             border-width: 10px;
58             bottom: -19px;
59             right:40px;
60             z-index: 9;
61         }
62 
63     </style>
64 </head>
65 <body>
66 
67         <div class="borderbottom"></div>
68         <div class="borderballoon"></div>
69         <div class="flatballoon"></div>
70 
71 </body>
72 </html>

 

主要是定位结合伪类实现其效果。

posted @ 2016-08-18 17:55  ipha  阅读(14021)  评论(1)  编辑  收藏  举报