DIV+CSS实现左侧带三角形的提示框

实现效果

实现代码

   DOCTYPE html  > 
   html  > 
     head  > 
       meta   charset  ="UTF-8"  > 
       link   rel  ="shortcut icon"   href  ="resources/img/logo-color.png"   type  ="image/x-icon"  > 
       title  > 测试   title  > 
       style  >  
    .out-div   {  
        color  :   #FFFFFF  ;  
        font-size  :   16px  ;  
        line-height  :   40px  ;  
        display  :   inline-block  ;  
        height  :   40px  ;  
        width  :   200px  ;  
        text-align  :   center  ;  
        border-radius  :   5px  ;  
        margin-left  :   32px  ;  
        vertical-align  :   top  ;  
        background-color  :   maroon  ; 
     }  
    
    .arrow   {  
        width  :   0px  ;  
        height  :   0px  ;  
        border-top  :   10px solid transparent  ;  
        border-right  :   10px solid  ;  
        border-bottom  :   10px solid transparent  ;  
        position  :   absolute  ;  
        margin-left  :   -10px  ;  
        margin-top  :   10px  ;  
        border-right-color  :   maroon  ; 
     } 
       style  > 
     head  > 
     body  > 
       div   class  ="out-div"  > 
           div   class  ="arrow"   >  div  > 
           span  > 这是一个提示框   span  > 
       div  > 
     body  > 
   html  >  

查看更多关于DIV+CSS实现左侧带三角形的提示框的详细内容...