<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
      <style type="text/css">
            div.container{
                position:absolute;
                top:30px;
                left:40px;
                height:100px;
                width:200px;
                
           }
           em{
               /*position:absolute决定这是一个块元素，不用display:block
                *原理：在于用em显示一个灰色的箭头，而i元素显示一个白色箭头，并且遮盖em元素
                */
               position:absolute;
               top:-20px;
               left:20px;
               height:0;
               width:0;
               /*此处透明比白色要好，否则颜色不明显
                *如果border的三个属性不能一起写，就三个全部单独写
                */
               border-color:transparent transparent #666 transparent;
               border-style:solid;
               border-width:10px;
           }
           i{
               position:absolute;
               top:-9px;
               left:-10px;
               height:0;
               width:0;
               border-color:transparent transparent #fff transparent;
               border-style:solid;
               border-width:10px;
           }
           .content{
               /*#666代表灰色，#fff代表白色*/
               border:1px solid #666;
               position:absolute;
               width:100%;
               height:100%;
               -moz-border-radius:3px;
               -webkit-border-radius:3px;
               border-radius: 3px;
           }
           </style>
       </head>
       <body>
           <div class="container">
               <div class="content">a</div>
               <em>
                   <i></i>
               </em>
           </div>
       </body>
   </html>

效果