0

enter image description here

I'm trying to draw this with CSS, I've got no solution. Can anyone help me with this? Ps: I've done little searching stuff, Thank you.

Rob
  • 14,746
  • 28
  • 47
  • 65
Telmen
  • 23
  • 1
  • 5

2 Answers2

6

You can use CSS pseudo elements here to draw dotted lines as:

.border {
  border-top: 1px dotted #000000;
  position: relative;
  margin: 100px 0 0 0;
  height: 4px;
}
.border::after {
  content: "";
  height: 1px;
  border-top: 1px dotted #000000;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.border::before {
  content: "";
  height: 1px;
  border-top: 1px dotted #000000;
  width: 100%;
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
}
<div class="border">

</div>
vivekkupadhyay
  • 2,851
  • 1
  • 22
  • 35
2

A repeating gradient can do that

div {
  height: 1.5em;
  background-image: radial-gradient(grey 15%, transparent 16%), radial-gradient(grey 15%, transparent 16%);
  background-size: .5em .5em;
  background-position: 0 0, .5em .5em
}
<div></div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • You're right. Now that I think of it, after the initial set up, a browser might just copy the repetitive image. Initially I was thinking it would have to draw each one. – Rob Aug 23 '16 at 15:08
  • Thank you for your time, @Paulie_D. But it seems not what I am asking for. But I really appreciate your try. – Telmen Aug 24 '16 at 10:13