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

Utilisation des points de texte

.discussion{
  width:50px;
  height:50px;
  text-align:center;
  background-color:black;
  border: 2px solid red;
  border-radius: 100%;
}
.discussion text{
  writing-mode: tb-rl;
  margin-top:0.4em;
  margin-left:0.45em;
  font-weight:bold;
  font-size:2em;
  color:white;
}

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

Answer 2

.discussion:after {
  content: '\2807';
font-size: 1em;
display: inline-block;
text-align: center;
background: #2d3446;
width: 20px;
height: 20px;
border-radius: 50%;
color: white;
 padding:3px;
}

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

Answer 3

J'ai supprimé (j'ai trouvé comment faire) tous mes messages, le code suivant fonctionne pour 3 points verticaux dans un cercle noir.

.discussion:after{
  display:inline-block;
  content:'\22EE';
  line-height:100%;
  border-radius: 50%;
  margin-left:10px;
  /********/
  font-size: 1em;             
  background: #2d3446;
  width: 20px;
  height: 20px;
  color:white;
}

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