Yocker
  1. Yocker
  3. Nuvoletta con la freccia
Intereting Posts
SessionTimeout: web.xml vs session.maxInactiveInterval () Come mappare un ResultSet con una quantità sconosciuta di colonne in un elenco e visualizzarlo in una tabella HTML? Qual è lo scopo del file vshost.exe? Come posso pubblicare un elenco di elementi in MVC Perché chiama il costruttore predefinito? Come creare gallerie Fancybox separate sulla stessa pagina? Modo più veloce per ottenere tutti i valori univoci di una colonna in VBA? ASP.NET MVC – Caricamento iniziale lento $ {employee.id} dall’elenco in JSP genera java.lang.NumberFormatException: per la stringa di input: “id” Come mantenere le impostazioni user.config tra diverse versioni di assembly in .net? In Matlab, quando è ottimale usare bsxfun? Come iniettare javascript in Chrome DevTools stesso Git branching: master vs. origine / master vs. remoti / origine / master Condivisione dei dati tra un’estensione di condivisione iOS 8 e l’app principale Invio di richieste http in C # con Unity

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