Bocadillo de diálogo con flecha

Tengo un proyecto en el que necesito insertar burbujas de discurso / cuadros de mensajes . La forma general que bash lograr es esta:

Bocadillo de diálogo CSS con flecha o triángulo

.bubble { height: 100px; width: 200px; border: 3px solid gray; background: lightgray; position: relative; cursor:pointer; } .triangle { width: 0; border-top: 20px solid black; border-left: 20px solid transparent; border-right: 20px solid transparent; cursor:pointer; } 
 
Speech bubble

Actualmente, esto no pasa una prueba de aciertos ya que también se puede hacer clic en el borde transparente.

Objetivos

  • El cuadro de hit (áreas clicables / divisibles) debe ajustarse a los límites de la forma (los bordes transparentes aquí también son divisibles, invalidando esto).

  • Necesito mostrar la forma sobre varios contenidos (imágenes, gradadores, texto …),

Cuestiones

Los principales problemas que tengo al manipular esta forma son:

  • Tener la capacidad de mover el triángulo alrededor de la burbuja de diálogo de acuerdo con la posición del elemento al que se refiere (lados superior / izquierdo / derecho / inferior)
  • agregar una sombra de borde o caja a su alrededor cuando se necesita énfasis

¿Hay alguna forma de abordar estos problemas?

Para lograr esto, debe considerar modificar su marcado para que su html sea más eficiente. Esto se puede lograr usando un pseudo elemento. Dirigiré cada punto individualmente y lo armaré al final de mi respuesta.

Ante todo,

Use pseudoelementos para evitar elementos adicionales

Podrías usar un pseudo elemento para eliminar el div adicional .triangle . Esto no solo reduce los números div, sino que también ayuda con el posicionamiento ya que puede usar las propiedades top: left: right: e bottom: css para posicionarse de acuerdo con su elemento principal. Esto se puede ver a continuación:

 .oneAndOnlyDiv { height: 100px; width: 200px; border: 3px solid gray; background: lightgray; position: relative; } .oneAndOnlyDiv:before { content: ""; position: absolute; top: 100%; left: 20px; width: 0; border-top: 20px solid black; border-left: 20px solid transparent; border-right: 20px solid transparent; } 
 
Main div

SVG

Esto no pasa una prueba de acierto ya que también se puede hacer clic en el borde transparente

Esto se puede hacer usando los eventos de puntero en svg.
pointer-events:visibleFill; Solo seleccionará la parte donde hay pintura.

Este ejemplo usa filter_box-shadow y no es compatible con IE.
También usa dos formas.

 html, body { margin: 0; padding: 0; } .bubble { width: 150px; height: 150px; -webkit-filter: drop-shadow(5px 5px 0px #aaa); filter: drop-shadow(5px 5px 0px #aaa); } .bubble-shape { fill: #1e1; } .shape-text { color: black; }