How to make 3 vertical dots using CSS?

Question

I want to have 3 dots on my page to, for example, toggle the display of a contextual menu. How can I achieve this using CSS?

Answer 1

If you are using font-awesome, it is as easy as including the .fa-ellipsis-v style. Further documentation is found here: http://fontawesome.io/icon/ellipsis-v/.

Answer 2

Most voted answer showed me with dotted with 2 column, So I accomplished with below Unicode character.

<div>&#xFE19;</div>

︙

Answer 3

Unicode includes ⠇ which is the Braille symbol for the letter "U". To use, just use the HTML entity ⠇ in your code.

Answer 4

using an unicode char

.test:after {
  content: '\2807';
  font-size: 100px;
  }

<div class="test"></div>

using background property

div {
    width: 100px;
    height: 100px;
    background-image: radial-gradient(circle, black 10px, transparent 11px);
    background-size: 100% 33.33%;
}

<div></div>

shadow

div {
  width: 30px;
  height: 30px;
  border-radius: 50%;
    background-color: black;
  box-shadow: 0px 40px 0px black, 0px 80px 0px black;
}

<div></div>

pseudo elements

div {
  position: relative;
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
}

div:before, div:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  background-color: inherit;
  border-radius: inherit;
  }

div:before {
  top: 40px;
  }


div:after {
  top: 80px;
}

<div></div>

Answer 5

1. With fontawesome.css

   <i class='fa fa-ellipsis-v'></i>
   

2. With Glyphicons

   <span class="glyphicons glyphicons-option-vertical"></span>
   

3. With css

   .textSpan:after {
    content: '\2807';
    font-size: 3em;
    color: #2e2e2e
   }
   

Answer 6

HTML

<div class="dot"></div>

css:

.dot{
    width: 10px;
    height: 10px;
    background: red;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}