Que onda!
Ojala no sea demasiado tarde para contestar tu pregunta, la imagen que pones de ejemplo no se ve, pero si entendi bien lo que quieres hacer: es un como tipo globo de texto que tenga una pico que apunte a cierta cosa, parecida a la que usan en los comics para indicar el dialogo de un personaje. Ademas con un botón, la verdad lo del boton ni lo intente hacer por que yo necesitaba algo parecido para señalar un campo vacio de un formulario. Y lo queria hacer usando CSS nada mas, de hecho por eso llegue aquí. Lo que hice fue lo siguiente:
EN LA HOJA DE ESTILO
Código:
.alert-der{/*globo de alert que flote a la derecha*/
background-color:none;
float:left;
position:relative;
z.index:2;
}
.esquina{
width:0;
height:0;
float:left;
border-left: 0;
border-right: 10px solid white;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
margin-top:5px;
}
.cuadrado{
background:none;
float:left;
width:120px;
height:30px;
border:white solid 1px;
-moz-border-radius:5px; /* Firefox */
-webkit-border-radius:5px; /* Safari, Chrome */
border-radius:5px; /* CSS3 */
}
EN TU PAGINA HTML
Código HTML:
<div class="alert-der">
<div class="esquina"></div>
<div class="cuadrado">Msj...</div><!--Aqui puedes meter el boton-->
</div><!--div alert-derecha-->
Hice tres estilos:
1° para hacer la esquina de la caja de texto en esta pagina explica como funciona ese estilo, de ahi me base
http://www.filamentgroup.com/lab/image_free_css_tooltip_pointers_a_use_for_polygona l_css/
2° para hacer el cuadro de texto con esquinas redondeadas, aqui explican como funciona eso:
http://www.css3.info/preview/rounded-border/
Lo probe y funciona en todos los navegadores (Firefox, safari, opera, chrome) excepto en IE, lo inetete usando border-radius.htc pero no me quedo. Si quieres intentarlo tu aqui explican como:
http://dimox.net/cross-browser-border-radius-rounded-corners/
3° un estilo que hace que floten a la derecha de las cosas
Ojala te sirva a ti o quien sea suerte!!
PD. En mi busqueda encontre estos tooltips para hacer algo similar http://www.1stwebdesigner.com/resources/stylish-jquery-tooltip-plugins-webdesign/