Ich möchte einen Kreis <div> machen, wie dieses Bild:drei vertikale Punkte (Auslassung) innerhalb eines Kreises
Ich habe diesen Code versucht.
.discussion:after {
content: '\2807';
font-size: 1em;
background: #2d3446;
width: 20px;
height: 20px;
border-radius: 100px;
color:white;
}<div class="discussion"></div>Wie kann ich richtig das?
könnten Sie verwenden nur :after Pseudoelement mit content: '•••' und transform: rotate. Beachten Sie, dass dies the bullet HTML special character• oder \u2022 ist.
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>Können Sie die Punkte zentriert machen? Sie sehen leicht nach unten und rechts verschoben aus. –
Ich habe meine Antwort mit '' 'bullet char aktualisiert und es sieht gut aus (ich habe es auf Firefox und Chrome getestet), einige Rückmeldungen wären hilfreich. –
auf meinem Rechner Es ist auf Chrom (54) zentriert, aber nicht auf Firefox (50) –
.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>i möchte 3 Punkte auf die Mitte des Kreises legen. Ich habe 'text-align: center' ausprobiert. aber es hat nicht funktioniert –
es ist zentriert. Ich denke, der Inhalt '\ 2807' hat etwas Platz auf der Seite –
' \ 2807' hat Platz auf der Seite, weil [es ist ein Braille-Zeichen] (http://www.fileformat.info/info/unicode/char/2807 /index.htm) und soll einen leeren Platz auf der rechten Seite haben (oder leere Punkte). Sie sollten '\ 22EE' verwenden, was das vertikale Ellipsenzeichen von Unicode ist (http://www.fileformat.info/info/unicode/char/22ee/index.htm). – doppelgreener
Ich hoffe, das ist, was Sie gesucht! Ansonsten kannst du gerne fragen.
.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] (http://www.fileformat.info/info/unicode/char/2807/index .htm), das 3 von 8 Punkten darstellt, die gefüllt werden. Ein konsistentes Erscheinungsbild ist nicht garantiert, da manchmal die anderen (leeren) 8 Punkte angezeigt werden. Es hat auch einen leeren Platz auf der rechten Seite, den Sie kompensieren mussten. Sie sollten '\ 22EE' verwenden, was [Unicode's tatsächliches vertikales Ellipsenzeichen] ist (http://www.fileformat.info/info/unicode/char/22ee/index.htm). – doppelgreener
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!
Es kann Browser/OS/font-abhängig sein, aber für mich, die Punkte nicht in der Mitte des Kreises angezeigt werden, zeigen sie zu viel nach rechts. 'links: 0; oben: 0; rechts: 0; text-align: center; 'macht Sinn und lässt es richtig erscheinen. – hvd
Und für mich (Firefox 50 64-Bit auf MSW 7) sind sie horizontal zentriert, aber am unteren Rand. – PJTraill
Wenn Sie sie vertikal und horizontal zentrieren möchten, fügen Sie einfach diese CSS-Eigenschaften hinzu. {Links: 50%; oben: 50%; transform: translate (-50%, -50%);}. hoffe das hilft, – Navnit
ich gelöscht haben (ich fand, wie es zu tun) alles meine Post, der folgende Code funktioniert für 3 vertikalen Punkt in einen schwarzen Kreis
.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>Ich habe Ihren Code in ein Code-Snippet umgewandelt. Sie haben ein Ausrichtungsproblem - die 3 Punkte sind nicht zentriert. – doppelgreener
auf Nenad Vracar's answer verbessern, ist hier ein das verwendet keinen Text (also ist es fontunabhängig) und alles ist gut zentriert:
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 Nutzung mehrerer Schatten. Wäre noch besser, wenn Sie es skalierbar machen könnten, indem Sie 'em' anstatt 'px' verwenden – Luciano
noch eine Lösung, die gleiche wie die anderen außer:
.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 ist eigentlich ein Braille-Muster und die Punkte sollen nicht zentriert werden.
Verwenden von Text dots
.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>
Cant verwenden Sie Abzeichen und setzen die drei Punkte nach innen? – Crowes
Ich kann Abzeichen nicht benutzen. entsprechend der Notwendigkeit dieser Aufgabe. –
Laut Kommentaren zu Antworten von Doppelgreener "\ 2807 ist eine Braille-Figur, die 3 Punkte von 8 darstellt, die gefüllt werden. Ein konsistentes Erscheinungsbild ist nicht garantiert, da manchmal die anderen (leeren) 8 Punkte angezeigt werden. Es hat auch leeren Platz rechts .... Sie sollten \ 22EE verwenden. Dies ist das tatsächliche vertikale Ellipsenzeichen von Unicode. ". – PJTraill