Bulle avec une flèche

J'ai un projet où j'ai besoin d'insérer bulles /boîtes de message. La forme générale je suis en train de réaliser est celui-ci :

CSS:

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

HTML:

<div class="bubble">Speech bubble
</div>
<div class="triangle">
</div>

Actuellement, cela ne passe pas un hit-test de la bordure transparente est également cliquables.

Objectifs

La hit box (cliquable /hoverable zones) doit coller à la forme des limites (les bordures transparentes d'ici sont aussi hoverable, d'invalider cette).
J'ai besoin d'afficher la forme plus divers contenus (images, gradents, texte...),

Questions

Les principales questions que je vais avoir lors de la manipulation de cette forme sont:

Ont la capacité de déplacer le triangle autour de la bulle de la parole en fonction de la position de l'élément qu'il désigne (haut/gauche/droite/bas gauche /droite)
l'ajout d'une bordure ou d'une zone d'ombre autour d'elle lorsque l'accent est nécessaire

Est-il de toute façon de répondre à ces questions?

c'est une double question
Bravo pour votre commentaire, cependant, j'ai été autour de cette balise pour un certain temps maintenant et ont encore à trouver une question à poser des questions sur les points indiqués. Si vous rencontrez une telle question, sentez-vous svp libre pour le lien et je vais passer ma réponse.

InformationsquelleAutor jbutler483 | 2015-05-18

Pour ce faire, vous devriez envisager de modifier votre balisage afin de rendre votre code plus efficace. Ceci peut être réalisé à l'aide d'un pseudo-élément. Je vais répondre à chaque point individuellement, et les mettre tous ensemble à la fin de ma réponse.

Tout d'abord,

Utiliser des pseudo-éléments pour éviter d'éléments supplémentaires

Vous pouvez utiliser un pseudo-élément pour supprimer les .triangle div. Cela réduit non seulement votre div numéros, mais aide aussi avec le positionnement que vous pouvez utiliser le top: left: right: et bottom: propriétés css pour positionner selon votre élément principal. Cela peut être vu ci-dessous:

CSS:

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

HTML:

<div class="oneAndOnlyDiv">Main div</div>

Frappé tests

Afin de créer votre "coup d'essai", vous pouvez utiliser une rotation de l'élément au lieu d'une frontière hack.

Quelque chose comme:

CSS:

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
}
div:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 20px;
  height: 20px;
  width: 20px;
  background: black;
  transform: rotate(45deg);
  transform-origin:top right;
}

HTML:

<div>Only element</div>

ou utiliser un biaisée pseudo élément:

CSS:

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
}
div:before {
  content: "";
  position: absolute;
  top: 90%;
  left: 20px;
  height: 30%;
  width: 20px;
  background: black;
  transform: skewY(-45deg);
  transform-origin:bottom left;
  z-index:-1;
}

HTML:

<div>Only element</div>

qui va montrer le pointeur seulement lorsque le carré ou l'élément principal est planait.
Mais attendez, ce qui bousille le positionnement? comment pouvez-vous gérer cela?

Il existe quelques solutions pour que. L'une est d'utiliser le calc propriété CSS.

CSS:

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
}
div:before {
  content: "";
  position: absolute;
  top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/
  top: calc(100% - 10px); /*i.e. half the height*/
  left: 20px;
  height: 20px;
  width: 20px;
  background: gray;
  transform: rotate(45deg);
}

HTML:

<div>Only element</div>

Ajout d'une bordure

Vous pouvez ajouter une bordure assez facilement, simplement en l'ajout d'une déclaration sur la frontière de l'élément principal, et le réglage de la border-bottom et border-right de la pseudo-élément inherit

Frontière

CSS:

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
  border:3px double black;
}
div:before {
  content: "";
  position: absolute;
  top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/
  top: calc(100% - 10px); /*i.e. half the height*/
  left: 20px;
  height: 20px;
  width: 20px;
  background: gray;
  transform: rotate(45deg);
  border-bottom:inherit;
  border-right:inherit;
  box-shadow:inherit;
}

HTML:

<div>Only element</div>

Zone D'Ombre:

Afin d'avoir une zone d'ombre, j'ai utilisé le :after pseudo élément afin de masquer la zone d'ombre sur l'autre pseudo, faisant de l'élément paraître comme un seul élément.

CSS:

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
  box-shadow: 5px 5px 10px 2px black;
}
div:before,div:after {
  content: "";
  position: absolute;
  top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/
  top: calc(100% - 10px); /*i.e. half the height*/
  left: 20px;
  height: 20px;
  width: 20px;
  background: gray;
  transform: rotate(45deg);
z-index:-1;
  box-shadow:inherit;
}
div:after{
  box-shadow:none;
  z-index:8;
  }

HTML:

<div>Only element</div>

Mettre tous ensemble

Vous pouvez également ajouter une bordure de rayon à votre boîte de message ou de la bulle de la parole une fois de plus, à l'aide de la border-radius de la propriété:

CSS:

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
  border:3px double black;
  border-radius:10px;
}
div:before {
  content: "";
  position: absolute;
  top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/
  top: calc(100% - 10px); /*i.e. half the height*/
  left: 20px;
  height: 20px;
  width: 20px;
  background: gray;
  transform: rotate(45deg);
  border-bottom:inherit;
  border-right:inherit;
  box-shadow:inherit;
}

HTML:

<div>Only element</div>

Cela vous permet même de créer non seulement un triangle, mais que diriez-vous d'un cercle à la place?

CSS:

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
  border:3px double black;
  border-radius:10px;
}
div:before {
  content: "";
  position: absolute;
  top: -webkit-calc(100% - 13px); /*may require prefix for old browser support*/
  top: calc(100% - 13px); /*i.e. half the height + border*/
  left: 20px;
  height: 20px;
  width: 20px;
  background: gray;
  transform: rotate(45deg);
  border:3px double transparent;
  border-bottom:inherit;
  border-right:inherit;
  box-shadow:inherit;
  border-radius:50%;
}

HTML:

<div>Only element</div>

Si vous rencontrez des problèmes avec le contenu de déborder et être "caché" derrière ce pseudo-élément, et vous n'êtes pas préoccuper d'avoir une frontière, vous pouvez utiliser un z-index négative qui permettra de résoudre ce problème.

N'aime pas utiliser "magic numbers"?

Si vous n'aimez pas l'idée de l'aide d'un calcul de valeur, dans lequel le positionnement dans ma réponse est en train d'utiliser (tout en travaillant), vous pouvez utiliser transform:translate(50%)

Ce serait une bien meilleure approche, car:

Vous n'avez pas besoin de connaître la taille de la frontière, ni la moitié de la largeur
Vous allez faire de votre boîte de message/bulle beaucoup plus dynamique dans son positionnement, et de soutien autres sizings.

CSS:

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor: pointer;
  border: 3px double black;
  border-radius: 10px;
}
div:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 30px;
  height: 20px;
  width: 20px;
  background: gray;
  box-sizing:border-box;
  transform: rotate(45deg) translate(-50%);
  border-bottom: inherit;
  border-right: inherit;
  box-shadow: inherit;
}

HTML:

<div>Only element</div>

Vous souhaitez le déplacer? Vous pouvez!

CSS:

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor: pointer;
  border: 3px double black;
  border-radius: 10px;
}
div:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  height: 20px;
  width: 20px;
  background: gray;
  box-sizing: border-box;
  transform: rotate(45deg) translate(-50%);
  border-bottom: inherit;
  border-right: inherit;
  box-shadow: inherit;
  transition: all 0.8s;
}
div:hover:before {
  left: 90%;
}

HTML:

<div>Only element</div>

Voulez il un droit?

CSS:

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor: pointer;
  border: 3px double black;
  border-radius: 10px;
}
div:before {
  content: "";
  position: absolute;
  top: 15%;
  left: 100%;
  height: 20px;
  width: 20px;
  background: gray;
  box-sizing:border-box;
  transform: rotate(45deg) translate(-50%);
  border-top: inherit;
  border-right: inherit;
  box-shadow: inherit;
  transition:all 0.8s;
}
div:hover:before{
  top:80%;
  }

HTML:

<div>Only Element</div>

Voulez qu'il soit d'une autre forme de triangle?

CSS:

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor: pointer;
  border-radius: 10px;
}
div:before {
  content: "";
  position: absolute;
  top: 70%;
  left: 100%;
  height: 20px;
  width: 20px;
  background: gray;
  box-sizing:border-box;
  transform:  translate(-50%) skewX(45deg);
  box-shadow: inherit;
  transition:all 0.8s;
  z-index:-1;
}
div:hover:before{
  transform:  translate(-50%);
  border-radius:50%;
  top:20%;
  }

HTML:

<div>Only Element</div>

Grande réponse détaillée.
cheers @Paulie_D: Juste pensé qu'il y avait de la place pour un "détaillé" réponse, qui traite de la plupart des points 🙂
Mon seul commentaire serait la position calc valeurs. Ne pourriez-vous pas utiliser un transform:translate(50%) au lieu de cela, il fonctionne pour toutes les tailles...pas de nombre magique nécessaire?
vous êtes un génie (tout oublié...encore une fois) lol. Édité

InformationsquelleAutor jbutler483

SVG

Cela ne passe pas un hit-test de la bordure transparente est également cliquables

Cela peut être fait en utilisant le pointeur de-événements en svg.

pointer-events:visibleFill; Permettra de sélectionner uniquement la partie où il y a de la peinture.

Cet exemple utilise filter_box-ombre et n'est pas pris en charge par IE.

Utilise également deux formes.

CSS:

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

HTML:

<svg class="bubble" viewBox="0 0 110 110" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <g class="bubble-shape" style="cursor:pointer; pointer-events:visibleFill;">
    <rect x="10" y="10" width="90" height="90" rx="15" ry="15" />
    <polygon points="20,94 40,94 30,105" />
  </g>
</svg>

Bulle avec une flèche

Cet exemple utilise un chemin d'accès

Devraient être pleinement pris en charge par IE.

CSS:

html,
body {
  margin: 0;
  padding: 0;
}
.bubble {
  width: 150px;
  height: 150px;
}
.bubble-shape {
  stroke-width: 15;
  stroke: #ddd;
  fill: #1e1;
}
.shape-text {
  color: black;
}

HTML:

<svg class="bubble" viewBox="-70 -10 390 370" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <g style="cursor:pointer; pointer-events:visible;">
    <path class="bubble-shape" d="m 0,0 250,0 c 25,0 50,20 50,50 l 0,225 c 0,25 -25,50 -50,50 l -175,0 -25,20 -20,-20 -40,0 c -25,0 -50,-25 -50,-50 l 0,-225 C -50,25 -50,0 0,0 Z" />
  </g>
</svg>

Bulle avec une flèche

InformationsquelleAutor Persijn

0

J'ai trouvé ce merveilleux service à rendre personnalisable CSS flèches.
Tout simplement de générer et de l'utiliser avec n'importe quel bloc.

http://www.cssarrowplease.com/

InformationsquelleAutor Oleg Abrazhaev

Vous devez vous connecter pour publier un commentaire.