Fenêtre de discussion avec css

Je suis coincé avec une fenêtre de discussion que nous créons à l'aide de CSS après, avant les éléments. Mon code est ajouté ci-dessous. Mes questions sont les suivantes:Fenêtre de discussion avec css

Pourquoi avons-nous mis content si elle est vide?
Pourquoi le position est changé en absolute en :after et :before?
La question principale est: comment dessinons-nous la flèche sur le côté gauche?

.bubble { 
 
    position: relative; 
 
    width: 580px; 
 
    min-height: 65px; 
 
    padding: 15px; 
 
    background: #fff; 
 
    border-radius: 10px; 
 
    border: 1px solid #ccc; 
 
    margin-left: 50px; 
 
    margin-top: 59px; 
 
} 
 

 
.bubble:after { 
 
    content: ''; 
 
    position: absolute; 
 
    border-style: solid; 
 
    border-width: 15px 15px 15px 0; 
 
    display: block; 
 
    width: 0; 
 
    z-index: 1; 
 
    margin-top: -15px; 
 
    left: -15px; 
 
    top: 50%; 
 
    border-color: transparent #fff; 
 
} 
 

 
.bubble:before { 
 
    content: ''; 
 
    position: absolute; 
 
    border-style: solid; 
 
    border-width: 15px 15px 15px 0; 
 
    display: block; 
 
    width: 0; 
 
    z-index: 0; 
 
    margin-top: -15px; 
 
    left: -16px; 
 
    top: 50%; 
 
    border-color: transparent red; 
 
}

<html> 
 

 
<body> 
 
    <div class="bubble"> 
 
    <div class="Pointer"> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
     </p> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Source

2017-07-28 Neha

pseudo-éléments sont créés au style ** contenu supplémentaire **. Ce * contenu * est ce que vous mettez dans la propriété 'content'. Si vous ne spécifiez pas de valeur pour la propriété 'content', la valeur par défaut est' none'. Si le contenu est 'none', il n'y a rien à styler et quel que soit le style appliqué, vous n'aurez rien à appliquer. –

La flèche est créée avec deux triangles réalisés avec les propriétés de bordure. Un triangle rouge utilisant: avant et un blanc utilisant: après. Le blanc est mis en haut avec z-index et le triangle rouge est mis un pixel de plus vers la gauche. Maintenant, on dirait qu'une ligne est dessinée, mais cela montre juste une petite partie du triangle rouge. – Gerard

Le contenu vide est tout simplement un moyen de créer un style « objet » qui ne contient pas vraiment de « contenu ». La position se réfère à la position de la "chose stylée mais vide" avant et après votre "bulle", elle ne se réfère pas à la position de la bulle elle-même.

Source

2017-07-28 16:55:18

1) La raison pour laquelle vous définissez le contenu comme vierge est de dire au code HTML que vous voulez toujours que l'élément apparaisse. Si vous ne définissez pas le contenu sur une chaîne vide (c'est-à-dire content: '';), l'élément n'apparaît pas.

Si vous supprimez la ligne content: ''; à l'intérieur de votre .bubble:after, vous obtiendrez l'extrait suivant. Ce qui rend alors cette flèche rouge remplie.

2) Vous voulez que l'élément soit une position absolue par rapport à l'élément parent. Donc, il sera toujours à l'endroit exact où vous voulez qu'il soit.

3) Vous dessinez la flèche à l'aide du sélecteur .bubble:before et de la propriété border-color. Si vous supprimez transparent de la propriété border-color à l'intérieur de votre .bubble: avant le sélecteur vous obtenez un carré. pas le beau triangle. Dans l'ensemble, puisque vous apprenez le CSS, et je suppose que vous suivez des tutoriels, je suggérerais que si vous ne savez pas comment quelque chose fonctionne, commentez UNE ligne à la fois, puis actualisez votre page. Voir si des changements visibles sont sur l'écran.

Pour répondre à cette question, je me suis débarrassé d'une seule ligne, puis actualisé pour voir comment votre code a été écrit. Puis le remettre si je n'ai pas aimé les changements. : D

.bubble { 
 
    position: relative; 
 
    width: 580px; 
 
    min-height: 65px; 
 
    padding: 15px; 
 
    background: #fff; 
 
    border-radius: 10px; 
 
    border: 1px solid #ccc; 
 
    margin-left: 50px; 
 
    margin-top: 59px; 
 
} 
 

 
.bubble:after { 
 
    position: absolute; 
 
    border-style: solid; 
 
    border-width: 15px 15px 15px 0; 
 
    display: block; 
 
    width: 0; 
 
    z-index: 1; 
 
    margin-top:-15px; 
 
    left: -15px; 
 
    top:50%; 
 
    border-color: transparent #fff; 
 
} 
 

 
.bubble:before { 
 
    content: ''; 
 
    position: absolute; 
 
    border-style: solid; 
 
    border-width: 15px 15px 15px 0; 
 
    display: block; 
 
    width: 0; 
 
    z-index: 0; 
 
    margin-top:-15px; 
 
    left:-16px; 
 
    top: 50%; 
 
    border-color: transparent red; 
 
}

<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <div class="bubble"> 
 
      <div class="Pointer"> 
 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting 
 
       industry. 
 
      </p> 
 
      </div> 
 
    </div> 
 
</body> 
 
</html>

Source

2017-07-28 17:06:57

Pour la question « comment nous traçons la flèche sur le côté gauche »: La forme triangulaire est atteint par la classe css pseudo .bubble:after où nous avons la largeur de bordure donnée comme 15px 15px 15px 0px pour la largeur de la bordure en haut, à droite, en bas et à gauche des styles. Pour plus de telles astuces css s'il vous plaît se référer here.

Source

2017-07-28 17:07:35 Abhishek

Parce qu'il est la façon dont le css fonctionne: P
absolu est utilisé pour Pour mieux la position de commande (mais il est par rapport au parent)
ici trick est utilisé - flèche sur le côté gauche est créé par triangles rouges et blancs (le blanc est sur le rouge, mais le chevauchent de cette façon que la limite 1px du rouge est visible).Trinagles sont dessiner avec bordures épaisses de div éléments - il vaut mieux visible ci-dessous par exemple:

Regardez ici: https://jsfiddle.net/q30Lnbfr/

.test1 { 
    border-style: solid; 
    border-width: 15px 15px 15px 0; 
    width: 0; 
    border-color: transparent red; 
} 

.test2 { 
    border-style: solid; 
    border-width: 15px 15px 15px 15px; 
    width: 30px; 
    border-color: green red; 
} 

<div class="test1"> 

</div> 
<br> 
<div class="test2"> 

</div>

Source

2017-07-28 17:08:16

* Parce que c'est la façon dont la css fonctionne * n'est pas vraiment une réponse. –

Fenêtre de discussion avec css

Répondre

Questions connexes