<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> * { margin: 0px; padding: 0px; } #show { margin: 10px auto; position: absolute; top: 50px; left: 50px; text-align: center; } #some { 200px; margin-left: 100px; text-align: center; position: absolute; background-color: rgba(255, 0, 0,0.6); border-radius: 5px; } #info { 400px; height: 300px; position: absolute; } #outarrow { border-color: transparent transparent #efefef; border-style: solid; border- 16px; height: 0; 0; position: absolute; top: 0px; left: 184px; } #innerarrow { border-color: transparent transparent white; border-style: solid; border- 16px; height: 0; 0; position: absolute; top: 0px; left: 184px; margin-top: 6px; } #content { border: 4px solid; border-radius: 4px; border-color: #efefef; 400px; margin: 32px auto 0px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #content p { text-align: left; text-indent: 20px; } </style> </head> <body> <div id="show"> <div id="some">下面就是箭头效果</div> <div id="info"> <div id="outarrow"></div> <div id="innerarrow"></div> <div id="content"> <h1>使用边界产生箭头</h1> <p>要点1：设置盒子的宽高均为0，只设置边界宽度</p> <p>要点2：可以通过border-style改变效果</p> </div> </div> </div> </body> </html>
显示效果：
