Erstellen Sie drei vertikale Punkte (Ellipse) innerhalb eines Kreises

Lesezeit: 5 Minuten

Ich möchte einen Kreis machen <div>wie dieses Bild:

Hier ist das Bild

Ich habe diesen Code ausprobiert.

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

Wie mache ich das richtig?

  • Kannst du keine Abzeichen verwenden und die drei Punkte hineinstecken?

    – Josua

    16. November 2016 um 9:36 Uhr

  • Laut Kommentaren zu Antworten von doppelgreener „\2807 ist ein Braille-Zeichen, das 3 von 8 gefüllten Punkten darstellt. Es ist nicht garantiert, dass es ein konsistentes Erscheinungsbild hat, da es manchmal die anderen (leeren) 8 Punkte enthält. Es hat auch einen leeren Raum auf der rechten Seite …. Sie sollten \22EE verwenden, das eigentliche vertikale Auslassungszeichen von Unicode.

    – PJTrail

    17. November 2016 um 0:09 Uhr

  • Um Zeit zu sparen und die Flexibilität zu erhöhen, sollten Sie einfach einen Icon-Font verwenden; zum Beispiel (oder mach dein eigenes). Es ist eine seltene Seite, die nur ein bestimmtes Symbol verwendet.

    – dreißig Punkte

    17. November 2016 um 10:50 Uhr

  • Warum kein SVG? Es ist das, was GitHub verwendet.

    – Gustavo Rodrigues

    17. November 2016 um 12:37 Uhr

  • Mögliches Duplikat von CSS: Wie zeichnet man einen Kreis mit Text in der Mitte?

    – Zach Saucier

    17. November 2016 um 17:34 Uhr

Benutzer-Avatar
Nenad Vracar

Du könntest einfach verwenden :after Pseudoelement mit content: '•••' und transform: rotate. Beachten Sie, dass dies der Fall ist das Bullet-HTML-Sonderzeichen oder \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>

  • Kannst du die Punkte zentrieren? Sie sehen leicht nach unten und rechts verschoben aus.

    – camden_kid

    16. November 2016 um 12:41 Uhr


  • Ich habe meine Antwort mit aktualisiert bullet char und es sieht gut aus (ich habe es auf Firefox und Chrome getestet), etwas Feedback wäre hilfreich.

    – Nenad Vracar

    16. November 2016 um 16:25 Uhr

  • Auf meinem Computer ist es auf Chrome (54) zentriert, aber nicht auf Firefox (50)

    – Mariusz Pawelski

    17. November 2016 um 10:49 Uhr

Benutzer-Avatar
gronostaj

Hier ist eine Verbesserung der Antwort von Nenad Vracar, die keinen Text verwendet (also schriftartunabhängig) und alles schön zentriert ist:

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>

  • Das ist eine intelligente Verwendung mehrerer Schatten. Wäre noch besser, wenn Sie es skalierbar machen könnten, indem Sie ’em’ anstelle von ‘px’ verwenden.

    – Luciano

    17. November 2016 um 16:10 Uhr

Benutzer-Avatar
Salmann A

Noch eine andere Antwort, die gleiche wie andere, außer:

  • es verwendet das vertikale Auslassungszeichen (U+22EE)
  • text-align und line-height, um den Inhalt zu zentrieren
  • verwendet keinen Pixelwert
.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>

Beachten Sie, dass U+2807 eigentlich ein Braille-Muster ist und die Punkte sollen nicht zentriert sein.

Benutzer-Avatar
Navnit

Verwenden Sie diesen 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>

Hoffe das hilft!

Ich hoffe, das ist, was Sie wollten! Ansonsten fragen Sie gerne nach.

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

  • \2807 ist ein Braille-Zeichen repräsentiert 3 von 8 gefüllten Punkten. Es ist nicht garantiert, dass es ein konsistentes Erscheinungsbild hat, da es manchmal die anderen (leeren) 8 Punkte enthält. Es hat auch rechts einen leeren Raum, den Sie kompensieren mussten. Sie sollten verwenden \22EEwelches ist das eigentliche vertikale Auslassungszeichen von Unicode.

    – doppelgrüner

    16. November 2016 um 18:59 Uhr

Benutzer-Avatar
Herr Bruno

Verwendung von Textpunkten

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

  • \2807 ist ein Braille-Zeichen repräsentiert 3 von 8 gefüllten Punkten. Es ist nicht garantiert, dass es ein konsistentes Erscheinungsbild hat, da es manchmal die anderen (leeren) 8 Punkte enthält. Es hat auch rechts einen leeren Raum, den Sie kompensieren mussten. Sie sollten verwenden \22EEwelches ist das eigentliche vertikale Auslassungszeichen von Unicode.

    – doppelgrüner

    16. November 2016 um 18:59 Uhr

Benutzer-Avatar
Ron Basco

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

  • Ich möchte 3 Punkte in die Mitte des Kreises setzen. Ich habe versucht text-align:center. aber es hat nicht funktioniert

    Benutzer7030651

    16. November 2016 um 9:41 Uhr

  • es ist zentriert. Ich denke, der Inhalt \2807 etwas Platz auf der Seite haben

    – Ron.Basco

    16. November 2016 um 9:46 Uhr

  • \2807 hat Platz auf der Seite, weil es ist ein Braille-Zeichen und soll rechts einen leeren Raum (oder leere Punkte) haben. Sie sollten verwenden \22EEwelches ist das vertikale Auslassungszeichen von Unicode.

    – doppelgrüner

    16. November 2016 um 18:53 Uhr


1284000cookie-checkErstellen Sie drei vertikale Punkte (Ellipse) innerhalb eines Kreises

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy