CSS實現帶箭頭的DIV

          畢業設計要做一個提示框：當滑鼠放在某個連結上時，下邊顯示有提示功能的表單。如下：

          具體代碼實現如下：

　　　  CSS：

 1 .rhsyyhqDIV{ 2     position:absolute; 3     top:555px; 4     left:200px; 5     font-size: 9pt; 6     display:block; 7     height:335px; 8     width:405px; 9     background-color:transparent;10     display: none;11 }12 13 s{14     position:absolute;15     top:-20px;16     left:50px;17     display:block;18     height:0;19     width:0;20     font-size: 0; 21     line-height: 0;22     border-color:transparent transparent #FA0505 transparent;23     border-style:dashed dashed solid dashed;24     border-width:10px;25 }26 27 i{28     position:absolute;29     top:-9px;30     *top:-9px;31     left:-10px;32     display:block;33     height:0;34     width:0;35     font-size: 0;36     line-height: 0;37     border-color:transparent transparent #FFFFFF transparent;38     border-style:dashed dashed solid dashed;39     border-width:10px;40 }41 42 .rhsyyhqDIV .content{43     border:1px solid #FA0505;44     -moz-border-radius:3px;45     -webkit-border-radius:3px;46     position:absolute;47     background-color:#FEFEF4;48     width:100%;49     height:100%;50     padding:5px;51     *top:-2px;52     *border-top:1px solid #FA0505;53     *border-top:1px solid #FA0505;54     *border-left:none;55     *border-right:none;56     *height:102px;57 }

 

    HTML

 1     <div class="rhsyyhqDIV"> 2         <div class="content"> 3             <div  class="title"> 4                 <font>使用優惠碼說明</font> 5             </div> 6             <div class="main"> 7                 <ul> 8                     <li> 如:登陸成功後,在文字框中輸入優惠碼,點擊"使用"按鈕</li> 9                     <li><img src="${/paixie/images/proscenium/rhsyyhq_01.jpg"/></li>10                     <li><img src="${/paixie/images/proscenium/rhsyyhq_02.jpg"/></li>11                 </ul>12             </div>13         </div>14         <s><i></i></s>15     </div>