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

 

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

转载于:https://www.cnblogs.com/thomaspha/p/5784877.html

你可能感兴趣的:(CSS纯样式实现箭头、对话框等形状)