标签：
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;
/*箭头指向上；要想箭头朝下用 border-top-color:#c2e1f5;*/
40 border-width:30px; 41 margin-left:-30px; 42 } 43 </style> 44 </head> 45 <body> 46 <div class="arrow_box"> 47 <h1 class="logo">css arrow please!</h1> 48 </div> 49 </body> 50 </html>
标签：
原文地址：http://www.cnblogs.com/mmzuo-798/p/5475106.html
