Create three vertical dots (ellipsis) inside a circle

Question

I want to make a circle <div>, like this 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?

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 '16 at 00:09
To save time and increase flexibility, you should just use an icon font; [for example](https://material.io/icons/#ic_more_vert) (or [make your own](https://icomoon.io/)). It's a rare site that only uses one specific icon. — thirtydot, Nov 17 '16 at 10:50
Why not SVG? [It's what GitHub uses](https://github.com/blog/2112-delivering-octicons-with-svg). — Gustavo Rodrigues, Nov 17 '16 at 12:37
Possible duplicate of [css: how to draw circle with text in middle?](http://stackoverflow.com/questions/16615403/css-how-to-draw-circle-with-text-in-middle) — Zach Saucier, Nov 17 '16 at 17:34

score 72 · Accepted Answer · edited Nov 16 '16 at 18:52

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>

edited Nov 16 '16 at 18:52

doppelgreener

4,809
10
46
63

answered Nov 16 '16 at 09:42

Nenad Vracar

118,580
15
151
176

12

Can you make the dots centred? They look slightly shifted down and right. – camden_kid Nov 16 '16 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. – Nenad Vracar Nov 16 '16 at 16:25
1

on my machine It's centered on chrome (54), but not on Firefox (50) – Mariusz Pawelski Nov 17 '16 at 10:49

score 52 · Answer 2 · edited May 23 '17 at 12:10

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>

edited May 23 '17 at 12:10

Community

1
1

answered Nov 16 '16 at 16:04

gronostaj

2,231
2
23
43

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 '16 at 16:10

Salman A · Answer 3 · 2016-11-17T13:41:03.940

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.

score 8 · Answer 4 · edited Nov 16 '16 at 18:48

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!

edited Nov 16 '16 at 18:48

doppelgreener

4,809
10
46
63

answered Nov 16 '16 at 09:47

Navnit

327
1
9

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. – Nov 16 '16 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 '16 at 00: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 '16 at 08:22
1

Wouldnt setting the margins to auto center the element? – Sinthia V Nov 17 '16 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 '16 at 09:58

score 5 · Answer 5 · answered Nov 16 '16 at 09:47

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>

answered Nov 16 '16 at 09:47

Aaron Mahlke

337
1
8

9

`\2807` is [a Braille character](http://www.fileformat.info/info/unicode/char/2807/index.htm) 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](http://www.fileformat.info/info/unicode/char/22ee/index.htm). – doppelgreener Nov 16 '16 at 18:59

score 1 · Answer 6 · answered Nov 17 '16 at 16:22

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>

score -3 · Answer 7 · answered Nov 16 '16 at 09:39

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

answered Nov 16 '16 at 09:39

Ron.Basco

2,348
16
25

i want to put 3 dots on the center of circle. i have tried `text-align:center`. but it did not work – Nov 16 '16 at 09:41
it is centered. i think the content `\2807` have some space on the side – Ron.Basco Nov 16 '16 at 09:46
3

`\2807` has space on the side because [it is a Braille character](http://www.fileformat.info/info/unicode/char/2807/index.htm) 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](http://www.fileformat.info/info/unicode/char/22ee/index.htm). – doppelgreener Nov 16 '16 at 18:53

score -3 · Answer 8 · edited Nov 16 '16 at 18:56

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

edited Nov 16 '16 at 18:56

doppelgreener

4,809
10
46
63

answered Nov 16 '16 at 10:31

Erick Boileau

478
4
14

3

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

Create three vertical dots (ellipsis) inside a circle

8 Answers8

Linked