Usando "required" logras esa ventanita idéntica a la que diste de ejemplo, solo en chrome.. va a depender del navegador porque es una ventana por defecto, tanto en mozilla, opera y explorer se va a ver diferente.
Si tu pregunta es como hacer la flechita, se hace con :after o :before (es indiferente cual uses).
Por ejemplo, una flechita a la derecha:
Código CSS:
Ver original.cartelito{
padding:.5em 1em;
background-color: #ff7461;
color:#fff;
font-family:Calibri;
font-size:1.2em;
width:150px;
text-align:center;
position:relative;
}
.cartelito:after{
content:"";
border-left: 10px solid #ff7461;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
position:absolute;
left:100%;
top: 10px;
}
-->
http://codepen.io/anon/pen/doyQxx * EDITO: Agregué 2 cartelitos más al codepen para que se entienda mejor *
Consiste en trabajar solo en los bordes, si te fijas los bordes a medida que se agrandan "chocan" entre si y forman una esquina:
Mira que pasa si colocamos bordes gruesos:
Entonces por deducción, para hacer la flecha hacia la derecha lo que hice fue aplicarle un border-left grueso y del color de la ventanita emergente, y bordes superior e inferior tambien gruesos para formar la flecha, pero indicando que sean transparentes:
Es cuestión de ir probando tamaños hasta que quede como te guste, se pueden hacer flechas flacas y largas, anchas y pequeñas, como a vos se te ocurra y en la posición que quieras. Por ejemplo, para hacer la flechita arriba como en la imagen que mostraste, usaría un border-bottom de color y bordes left y right transparentes para que formen la flecha, con un bottom de 100% y unos pocos pixeles de left.
Un detalle, siempre tiene que haber un "content" cuando asignas estilos a un after o un before.. para este caso en especial, lo dejas vacío, pero el atributo content tiene que estar sino la flecha no va a aparecer. Y para ubicarlo vas a tener que usar posición absoluta, siempre indicando que su padre tenga posición absoluta o relativa para que tome como referencia sus bordes, en mi ejemplo el div.cartelito tiene posición relativa.
Estaba inspirado jaja espero te sirva mi explicación, mejor que esto no lo puedo hacer :P
Saludos
