1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 *{margin:0;padding:0;}
8 .arrow_box{
9 position:relative;
10 background: #88b7d5;
11 border:4px solid #c2e1f5;
12 }
13 .arrow_box{
14 padding:40px;
15 width:280px;
16 height:100px;
17 border-radius: 6px;
18 margin:50px auto;
19 }
20
21 .arrow_box:before,.arrow_box:after{
22 position:absolute;
23 bottom: 100%;/*此时的箭头位置在最上面 top：100%;此时的箭头位置在最下面*/
24 left: 50%;
25 border: solid transparent;
26 content: " ";
27 height: 0;
28 width: 0;
29 pointer-events: none;
30 }
31 .arrow_box:before{
32 border-color: rgba(194, 225, 245, 0);
33 border-bottom-color: #c2e1f5;/*箭头指向上；要想箭头朝下用 border-top-color:#c2e1f5;*/
34 border-width:36px;
35 margin-left:-36px;
36 }
37 .arrow_box:after{
38 border-color: rgba(136, 183, 213, 0);
39 border-bottom-color: #88b7d5;
40 border-width:30px;
41 margin-left:-30px;
42 }
43 </style>
44 </head>
45 <body>
46 <divclass="arrow_box">
47 <h1 class="logo">css arrow please!</h1>
48 </div>
49 </body>
50 </html>
![]()
