Nuvoletta con la freccia

Ho un progetto in cui ho bisogno di inserire fumetti / caselle di messaggio . La forma generale che sto cercando di ottenere è questa:

Nuvoletta CSS con freccia o triangolo

.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

Al momento questo non supera un hit-test poiché anche il bordo trasparente è cliccabile.

obiettivi

  • La casella di riscontro (aree cliccabili / hoverable) ha bisogno di attenersi ai limiti della forma (i bordi trasparenti qui sono anche hoverable, invalidando questo).

  • Ho bisogno di visualizzare la forma su vari contenuti (immagini, gradienti, testo …),

Problemi

I principali problemi che ho riscontrato durante la manipolazione di questa forma sono:

  • Avere la possibilità di spostare il triangolo attorno alla nuvoletta in base alla posizione dell’elemento a cui fa riferimento (lati superiore / sinistro / destro / inferiore)
  • aggiungendo un’ombra di bordo o riquadro attorno ad esso quando è necessaria l’enfasi

Esiste comunque una soluzione a questi problemi?

Per raggiungere questo objective, dovresti prendere in considerazione la possibilità di modificare il markup per rendere il tuo html più efficiente. Questo può essere ottenuto usando uno pseudo elemento. Tratterò ogni punto individualmente e metterò tutto insieme alla fine della mia risposta.

Prima di tutto,

Usa pseudo elementi per evitare elementi extra

Potresti usare uno pseudo elemento per rimuovere il div .triangle extra. Questo non solo riduce i tuoi numeri div, ma aiuta anche il posizionamento in quanto puoi utilizzare il top: left: right: e bottom: proprietà css per posizionarsi in base al tuo elemento principale. Questo può essere visto qui sotto:

 .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

Questo non supera un hit-test in quanto anche il bordo trasparente è cliccabile

Questo può essere fatto usando gli eventi pointer in svg.
pointer-events:visibleFill; Seleziona solo la parte in cui è presente la vernice.

Questo esempio utilizza filter_box-shadow e non è supportato da IE.
Utilizza anche due forms.

 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; }