HI WELCOME TO KANSIRIS

How to make 3 vertical dots using CSS?

Leave a Comment

 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>

0 comments:

Post a Comment

Note: only a member of this blog may post a comment.