Tema: Globo de diálogo en css
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/10/2012, 17:25
Avatar de enmanuel99
enmanuel99
 
Fecha de Ingreso: noviembre-2008
Mensajes: 1
Antigüedad: 15 años, 5 meses
Puntos: 0
Globo de diálogo en css
Hola a todos soy nuevo en esto, Me encontré un css para hacer globos de diálogo, pero no se como cambiar el tamaño del borde del triángulo de la izquierda porque se deforma.. quiero que quede de 2px igual que el resto del globo.
Aquí el Código..

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Documento sin título</title>
  6. <style type="text/css">
  7.  
  8. .globo1 {
  9.     position:relative;
  10.     padding:15px;
  11.     margin:1em 0 3em;
  12.     border:2px solid #bde1fd;
  13.     color:#333;
  14.     background:#fff;
  15.     /* css3 */
  16.     -webkit-border-radius:10px;
  17.     -moz-border-radius:10px;
  18.     border-radius:10px;
  19.     margin-left:30px;
  20. }
  21.  
  22. .globo1:before {
  23.     content:"";
  24.     position:absolute;
  25.     border-style:solid;
  26.     /* reduce the damage in FF3.0 */
  27.     display:block; 
  28.     width:0;
  29.     top:10px; /* controls vertical position */
  30.     bottom:auto;
  31.     left:-30px; /* value = - border-left-width - border-right-width */
  32.     border-width:15px 30px 15px 0;
  33.     border-color:transparent #bde1fd;
  34. }
  35.  
  36. .globo1:after {
  37.     content:"";
  38.     position:absolute;
  39.     border-style:solid;
  40.     /* reduce the damage in FF3.0 */
  41.     display:block; 
  42.     width:0;
  43.     top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
  44.     bottom:auto;
  45.     left:-21px; /* value = - border-left-width - border-right-width */
  46.     border-width:9px 21px 9px 0;
  47.     border-color:transparent #fff;
  48. }
  49. </style>
  50. </head>
  51.  
  52. <body>
  53. <div class="globo1">Hola Mundo</div>
  54. </body>
  55. </html>

Gracias de antemano.