Globo de diálogo en css

enmanuel99 · #1 (**permalink**) 12/10/2012, 17:25

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
 
.globo1 {
    position:relative;
    padding:15px;
    margin:1em 0 3em;
    border:2px solid #bde1fd;
    color:#333;
    background:#fff;
    /* css3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    margin-left:30px;
}
 
.globo1:before {
    content:"";
    position:absolute;
    border-style:solid;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
    top:10px; /* controls vertical position */
    bottom:auto;
    left:-30px; /* value = - border-left-width - border-right-width */
    border-width:15px 30px 15px 0;
    border-color:transparent #bde1fd;
}
 
.globo1:after {
    content:"";
    position:absolute;
    border-style:solid;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
    top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
    bottom:auto;
    left:-21px; /* value = - border-left-width - border-right-width */
    border-width:9px 21px 9px 0;
    border-color:transparent #fff;
}
</style>
</head>
 
<body>
<div class="globo1">Hola Mundo</div>
</body>
</html>

Gracias de antemano.

furoya · #2 (**permalink**) 13/10/2012, 07:21

Vas a tener que practicar con la simulación de triángulos HTML/CSS.
¿Entendés lo que hace ese código, no?

Te dejo algunos links para que veas cómo se modifican los bordes.

Botones tipicos con cabeza de flecha

Intentando hacer triángulos en CSS

Dibujar una flecha con una div

[edit]
Perdón.
Recién me doy cuenta!

¡Bienvenido al Foro!

[/edit]

diegobrice · #3 (**permalink**) 22/10/2012, 21:39

Encontre esto:

[URL="http://cssarrowplease.com/"]http://cssarrowplease.com/[/URL]

Espero que te sirva!