Creando DIVs rectangulares con flechas

Question

¡Estoy comenzando a obtener más en CSS, y los experimentos iniciales han sido realmente buenos! ¡Estoy buscando mi feed con cuadros emergentes y estilos de CSS, etc.! Sin embargo, quiero empujar los límites de lo que sé un poco ...

Estoy tratando de lograr un estilo DIV (no hay problemas allí) que es rectangular, pero tiene una flecha que apunta a un icono en el navegador barra, ver imagen a continuación, que incluye el borde de la caja, y donde el DIV mismo puede variar en altura (aunque la flecha se mantiene la misma altura/ancho en todo momento).

Puede alguien me punto en la dirección correcta - o estoy tratando de hacer algo más que es posible !?

Gracias, de antemano.

Answer 1

Para una amplia compatibilidad con el navegador, debe hacerlo con imágenes de fondo. Hay varios recursos y tutoriales que puede consultar. Te aconsejo en este libro:

• Pro CSS and HTML Design Patterns - Excelente libro que tiene una sección sobre divs peinado con imágenes bg (code here - este ejemplo es para las esquinas redondeadas, que ahora se puede lograr con un buen soporte el uso de etiquetas de CSS3, pero le da una comprensión de cómo lograr cualquier efecto de borde que desee)

Y por supuesto, si busca en Google el estilo de fondo de la imagen de fondo, encontrará muchos ejemplos sobre cómo lograr ese tipo de efecto.

Answer 2

vimeo.com en realidad hacen eso con CSS puro, excepto que sus flechas apuntan hacia abajo. Una buena forma de aprender un nuevo CSS es usar Firefox + Firebug o simplemente Chrome y aprender a "tomar prestado" CSS de otros sitios.

Pedí prestado sus flechas hacia abajo una vez, y funcionó muy bien.