原理：
把容器的边框设置大一点，容器本身的长宽为0，只设置一边的颜色让其自然形成 箭头
参考文章
http://yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } #demo { background-color: #333; height: 100px; position: relative; width: 100px; } #demo:after { content: ‘ ‘; height: 0; position: absolute; width: 0; border: 10px solid transparent; border-top-color: #333; top: 100%; left: 50%; margin-left: -15px; } </style> </head> <body> <div id="demo"></div> </body> </html>
原文：http://www.cnblogs.com/wind90/p/4928650.html