Css3 提示框

<div class="arrow_box"><span>xxy is a so cool boy</span></div>

css:

 1         div{
 2             width: 200px;
 3             height: 100px;
 4             margin-top: 100px;
 5             text-align: center;
 6         }
 7         div span{
 8             text-align: center;
 9             vertical-align: -34px;
10             color: #5dff63;
11         }
12 
13         .arrow_box {
14             position: relative;
15             background: #88b7d5;
16             border: 4px solid #c2e1f5;
17         }
18 
19         .arrow_box:after, .arrow_box:before {
20             bottom: 100%;
21             left: 50%;
22             border: solid transparent;
23             content: " ";
24             height: 0;
25             width: 0;
26             position: absolute;
27             pointer-events: none;
28         }
29 
30         .arrow_box:after {
31             border-color: rgba(136, 183, 213, 0);
32             border-bottom-color: #88b7d5;
33             border-width: 30px;
34             margin-left: -30px;
35         }
36 
37         .arrow_box:before {
38             border-color: rgba(194, 225, 245, 0);
39             border-bottom-color: #c2e1f5;
40             border-width: 36px;
41             margin-left: -36px;
42         }

图：

 

关于伪元素的使用是一门技巧。自己研究吧，哈哈哈哈！！！！

转载于:https://www.cnblogs.com/xinxingyu/p/4770770.html