Créez trois points verticaux (ellipses) à l'intérieur d'un cercle.

Question

Je veux faire un cercle <div> comme cette image :

J'ai essayé ce code.

.discussion:after {
  content: '\2807';
  font-size: 1em;
  background: #2d3446;
  width: 20px;
  height: 20px;
  border-radius: 100px;
  color:white;
}

<div class="discussion"></div>

Comment puis-je le faire correctement ?

Answer 1

Vous pourriez simplement utiliser :after pseudo-élément avec content: '•••' y transform: rotate . Notez que c'est le caractère spécial HTML de la balle • o \u2022 .

div {
  position: relative;
  background: #3F3C53;
  width: 50px;
  height: 50px;
  color: white;
  border-radius: 50%;
  box-shadow: 0px 0px 15px 1px #4185BC;
  margin: 50px;
}
div:after {
  content: '•••';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  font-size: 15px; 
  letter-spacing: 4px;
  margin-top: 2px;
}

<div></div>

Answer 2

Améliorer les La réponse de Nenad Vracar Voici un exemple qui n'utilise pas de texte (il est donc indépendant de la police) et tout est bien centré :

div {
  position: relative;
  background: #3F3C53;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0px 0px 15px 1px #4185BC;
  margin: 50px;
}
div:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 2px;
  margin-left: -1px;
  margin-top: -1px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 0 0 2px white, 0 11px 0 2px white, 0 -11px 0 2px white;
}

<div></div>

Answer 3

Encore une autre réponse, la même que les autres sauf que :

• il utilise le caractère d'ellipse verticale (U+22EE)
• text-align et line-height pour centrer le contenu

• n'utilise pas de valeur de pixel

  .discussion:after { content: "\22EE"; / box model / display: inline-block; width: 1em; height: 1em; / decoration / color: #FFFFFF; background-color: #000000; border-radius: 50%; / center align / line-height: 1; text-align: center; }

  <div class="discussion"></div> <div class="discussion" style="font-size: 2em;"></div> <div class="discussion" style="font-size: 3em;"></div> <div class="discussion" style="font-size: 4em;"></div>

Notez que U+2807 est en fait un motif Braille. et les points ne sont pas censés être centrés .

Answer 4

Utilisez ce code.

.discussion {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
  background: #2d3446;
}

.discussion:after {
  content: '\22EE';
  font-size: 1em;
  font-weight: 800;
  color: white;
  position: absolute;
  left: 7px;
  top: 1px;
}

<div class="discussion"></div>

J'espère que cela vous aidera !

Answer 5

J'espère que c'est ce que vous vouliez ! Sinon, n'hésitez pas à demander.

.discussion{
  display: block;    /* needed to make width and height work */
  background: #2d3446;
  width: 25px;
  height: 25px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.discussion:after {
  content: '\2807';
  font-size: 1em; 
  color: white;
  margin-left: 15%;
}

<div class="discussion"></div>