CODEWITHSUNDEEP
htmlcssdrawcss-shapes
Telmen
Telmen

Reputation: 23

Trying to draw dotted line with CSS

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.

Upvotes: 0

Views: 3421

Answers (2)

Paulie_D
Paulie_D

Reputation: 115174

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>

Upvotes: 2

vivekkupadhyay
vivekkupadhyay

Reputation: 2891

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>

Upvotes: 6

Related Questions