58

I want to make a circle <div>, like this image:

here is the image

I have tried this code.

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

How can I do this correctly?

6
  • Cant you use badges and put the three dots inside?
    – Joshua
    Nov 16, 2016 at 9:36
  • 7
    According to comments on answers by doppelgreener “\2807 is a Braille character representing 3 dots out of 8 being filled. It is not guaranteed to have a consistent appearance, because sometimes it will feature the other (empty) 8 dots. It also has empty space off to the right …. You should be using \22EE, which is Unicode's actual vertical ellipsis character.”.
    – PJTraill
    Nov 17, 2016 at 0:09
  • 1
    To save time and increase flexibility, you should just use an icon font; for example (or make your own). It's a rare site that only uses one specific icon.
    – thirtydot
    Nov 17, 2016 at 10:50
  • 3
    Why not SVG? It's what GitHub uses. Nov 17, 2016 at 12:37
  • 1
    Possible duplicate of css: how to draw circle with text in middle? Nov 17, 2016 at 17:34

8 Answers 8

72

You could just use :after pseudo-element with content: '•••' and transform: rotate. Note that this is the bullet HTML special character , or \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>

3
  • 12
    Can you make the dots centred? They look slightly shifted down and right.
    – camden_kid
    Nov 16, 2016 at 12:41
  • 1
    I updated my answer with bullet char and it looks good (i tested on firefox and chrome), some feedback would be helpful. Nov 16, 2016 at 16:25
  • 1
    on my machine It's centered on chrome (54), but not on Firefox (50) Nov 17, 2016 at 10:49
52

Improving on Nenad Vracar's answer, here's one that doesn't use text (so it's font-independent) and everything is centered nicely:

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>

1
  • 3
    that's a smart use of multiple shadows. Would be even better if you could make it scalable by using 'em' instead of 'px'
    – Luciano
    Nov 17, 2016 at 16:10
13

Yet another answer, same as others except:

  • it uses the vertical ellipsis character (U+22EE)
  • text-align and line-height to center the content
  • does not use any pixel value

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

Note that U+2807 is actually a Braille pattern and the dots are not supposed to be centered.

8

Use this 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>

Hope this helps!

5
  • 2
    It may be browser/OS/font-dependent, but for me, the dots don't show up in the middle of the circle, they show up too much to the right. left: 0; top: 0; right: 0; text-align: center; makes sense and makes it show up properly.
    – user743382
    Nov 16, 2016 at 22:49
  • 3
    And for me (Firefox 50 64-bit on MSW 7) they are centred horizontally, but at the bottom.
    – PJTraill
    Nov 17, 2016 at 0:03
  • if you want to place them in center both vertically and horizontally then just add these css properties {left: 50%; top: 50%; transform: translate(-50%, -50%);}. hope this helps,
    – Navnit
    Nov 17, 2016 at 8:22
  • 1
    Wouldnt setting the margins to auto center the element?
    – Sinthia V
    Nov 17, 2016 at 18:46
  • @sinthia: just setting the :after element to margin: auto won't bring it in center as we have already given position absolute. If you want to use margin: auto in :after then all you need to do is remove the absolute, top, left elements from :after and add margin: auto. Also you will need to add display:flex in the main div container.
    – Navnit
    Nov 18, 2016 at 9:58
5

I hope this is what you wanted! Otherwise feel free to ask.

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

1
  • 9
    \2807 is a Braille character representing 3 dots out of 8 being filled. It is not guaranteed to have a consistent appearance, because sometimes it will feature the other (empty) 8 dots. It also has empty space off to the right you have had to compensate for. You should be using \22EE, which is unicode's actual vertical ellipsis character. Nov 16, 2016 at 18:59
1

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

-3

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

3
  • i want to put 3 dots on the center of circle. i have tried text-align:center. but it did not work
    – user7030651
    Nov 16, 2016 at 9:41
  • it is centered. i think the content \2807 have some space on the side
    – Ron.Basco
    Nov 16, 2016 at 9:46
  • 3
    \2807 has space on the side because it is a Braille character and is supposed to have empty space to the right (or empty dots). You should be using \22EE, which is unicode's vertical ellipsis character. Nov 16, 2016 at 18:53
-3

I have deleted (i found how to do it) all my post, the following code works for 3 vertical dot into a black circle

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

1
  • 3
    I've transformed your code into a code snippet. You have an alignment issue -- the 3 dots are not centered. Nov 16, 2016 at 18:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.