仅CSS的对话气泡效果

看到很好奇，想学习一下

转自：http://www.rainoina.com/raino/archive/413.html

 

代码

   
     

    
      
    
      <!
    
      DOCTYPE html
    
      >
    
      

    
      <
    
      html
    
      >
    
      

    
      <
    
      head
    
      >
    
      

    
      <
    
      meta 
    
      http-equiv
    
      ="Content-Type"
    
       content
    
      ="text/html; charset=GBK"
    
       
    
      />
    
      

    
      <
    
      meta 
    
      name
    
      ="description"
    
       content
    
      =""
    
       
    
      />
    
      

    
      <
    
      title
    
      ></
    
      title
    
      >
    
      

    
      <
    
      script 
    
      type
    
      ="text/javascript"
    
       src
    
      =""
    
      ></
    
      script
    
      >
    
      

    
      </
    
      head
    
      >
    
      

    
      <
    
      body
    
      >
    
      

    
      <
    
      style 
    
      type
    
      ="text/css"
    
      >
    
      
body
    
      {
    
      
 padding
    
      :
    
      20px
    
      ;
    
      
 font
    
      :
    
      12px/1.5 tahoma
    
      ;
    
      

    
      }
    
      
.bubble-box
    
      {
    
      
 background
    
      :
    
      #EEE
    
      ;
    
      
 width
    
      :
    
      200px
    
      ;
    
      
 height
    
      :
    
      60px
    
      ;
    
      
 margin-bottom
    
      :
    
      30px
    
      ;
    
      

    
      }
    
      
.bubble-box .wrap
    
      {
    
      
 background
    
      :
    
      #EEE
    
      ;
    
      

 
    
      /*
    
       修正IE6 
    
      */
    
      
 _position
    
      :
    
      relative
    
      ;
    
      
 _z-index
    
      :
    
      10
    
      ;
    
      

    
      }
    
      


    
      /*
    
       arrow-effect 
    
      */
    
      
.arrow-left
    
      {
    
       border-left
    
      :
    
      20px solid #FFF
    
      ;
    
       border-top
    
      :
    
      20px solid #EEE
    
      ;
    
       
    
      }
    
      
.arrow-right
    
      {
    
       border-right
    
      :
    
      20px solid #FFF
    
      ;
    
       border-top
    
      :
    
      20px solid #EEE
    
      ;
    
       
    
      }
    
      
.arrow-top
    
      {
    
       border-left
    
      :
    
      20px solid #EEE
    
      ;
    
       border-top
    
      :
    
      20px solid #FFF
    
      ;
    
       
    
      }
    
      
.arrow-bottom
    
      {
    
       border-left
    
      :
    
      20px solid #EEE
    
      ;
    
       border-bottom
    
      :
    
      20px solid #FFF
    
      ;
    
       
    
      }
    
      

.arrow-left .wrap,
.arrow-right .wrap
    
      {
    
      
 width
    
      :
    
      180px
    
      ;
    
      
 height
    
      :
    
      60px
    
      ;
    
      
 padding
    
      :
    
      10px 10px 0
    
      ;
    
      
 margin-top
    
      :
    
      -40px
    
      ;
    
      

    
      }
    
      

.arrow-top, .arrow-bottom
    
      {
    
       width
    
      :
    
      140px
    
      ;
    
       height
    
      :
    
      100px
    
      ;
    
       
    
      }
    
      

.arrow-top .wrap,
.arrow-bottom .wrap
    
      {
    
      
 width
    
      :
    
      180px
    
      ;
    
      
 height
    
      :
    
      90px
    
      ;
    
      
 padding
    
      :
    
      10px 10px 0
    
      ;
    
      
 margin-left
    
      :
    
      -40px
    
      ;
    
      

    
      }
    
      


    
      </
    
      style
    
      >
    
      

    
      <
    
      div 
    
      class
    
      ="bubble-box arrow-left"
    
      >
    
      
 
    
      <
    
      div 
    
      class
    
      ="wrap"
    
      >
    
      一些话，一些话，一些话，一些话，一些话
    
      </
    
      div
    
      >
    
      

    
      </
    
      div
    
      >
    
      


    
      <
    
      div 
    
      class
    
      ="bubble-box arrow-right"
    
      >
    
      
 
    
      <
    
      div 
    
      class
    
      ="wrap"
    
      >
    
      一些话，一些话，一些话，一些话，一些话
    
      </
    
      div
    
      >
    
      

    
      </
    
      div
    
      >
    
      


    
      <
    
      div 
    
      class
    
      ="bubble-box arrow-top"
    
      >
    
      
 
    
      <
    
      div 
    
      class
    
      ="wrap"
    
      >
    
      一些话，一些话，一些话，一些话，一些话
    
      </
    
      div
    
      >
    
      

    
      </
    
      div
    
      >
    
      


    
      <
    
      div 
    
      class
    
      ="bubble-box arrow-bottom"
    
      >
    
      
 
    
      <
    
      div 
    
      class
    
      ="wrap"
    
      >
    
      一些话，一些话，一些话，一些话，一些话
    
      </
    
      div
    
      >
    
      

    
      </
    
      div
    
      >
    
      

    
      </
    
      body
    
      >
    
      

    
      </
    
      html
    
      >