user4903904 user4903904 - 3 months ago 44
CSS Question

How to make 3 vertical dots using CSS?

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?

3-dots toggle animation gif

Answer

using an unicode char

.test:after {
  content: '\2807';
  font-size: 100px;
  }
<div class="test"></div>

using background property

div {
    width: 100px;
    height: 300px;
    background-image: radial-gradient(circle at center, black 10px, transparent 10px);
    background-size: 100px 100px;
}
<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>