Ik wil een cirkel maken <div>, zoals deze afbeelding:
Ik heb deze code geprobeerd.
.discussion:after {
content: '\2807';
font-size: 1em;
background: #2d3446;
width: 20px;
height: 20px;
border-radius: 100px;
color:white;
}<div class="discussion"></div>Snippet uitvouwen
Antwoord 1, autoriteit 100%
Je zou gewoon :afterpseudo-element kunnen gebruiken met content: '•••'en transform: rotate. Let op: dit is het speciale HTML-teken voor opsommingstekens•, of \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>Snippet uitvouwen
Antwoord 2, autoriteit 72%
Verbetering van Nenad Vracar’s antwoord, hier is er een die geen tekst gebruikt (dus lettertype-onafhankelijk) en zo is mooi gecentreerd:
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>Snippet uitvouwen
Antwoord 3, autoriteit 18%
Nog een ander antwoord, hetzelfde als anderen, behalve:
- het gebruikt het verticale weglatingsteken (U+22EE)
- tekst uitlijnen en regelhoogte om de inhoud te centreren
- gebruikt geen pixelwaarde
.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>Snippet uitvouwen
Antwoord 4, autoriteit 11%
Gebruik deze 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>Snippet uitvouwen
Antwoord 5, autoriteit 7%
Ik hoop dat dit is wat je wilde! Vraag het anders gerust.
.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>Snippet uitvouwen
Antwoord 6
Tekstpunten gebruiken
.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>Snippet uitvouwen
Antwoord 7
.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>Antwoord 8
Ik heb al mijn berichten verwijderd (ik heb gevonden hoe ik dit moet doen), de volgende code werkt voor 3 verticale stippen in een zwarte cirkel
.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>