White Maskers White Maskers - 1 month ago 7
CSS Question

Is it possible to create dots using css and html?

I'm working on a mobile designing I need to be to represent speaker portion using two rows of dots.Is it possible to design some dot's using html and css ?.I searched for a long time ,but I didn't get a relevant answer.Can any one help me?

I added a picture for better understanding .
enter image description here

Answer

One way is to use radial gradient, less good browser support though

.dots {
  height: 36px;
  background-image: -webkit-repeating-radial-gradient(center center, rgba(255,255,255,.4), rgba(255,255,255,.4) 4px, transparent 4px, transparent 100%);
  background-image: repeating-radial-gradient(center center, rgba(255,255,255,.4), rgba(255,255,255,.4) 4px, transparent 4px, transparent 100%);
  background-size: 12px 12px;
  background-color: black;
}
<div class="dots"></div>

Comments