CODEWITHSUNDEEP
javascripthtmlcsslinear-gradients
Mr.Sef
Mr.Sef

Reputation: 49

Drawing dotted lines and straight lines as background of Div

Is there a way to draw horizontal lines and dashed lines in the background of a div with JavaScript or CSS, without using a repeated image? Basically to achieve something that looks like the image below?

Upvotes: 3

Views: 7770

Answers (1)

Harry
Harry

Reputation: 89750

It is possible to create this pattern with pure CSS by using a combination of linear-gradient images and radial-gradient images for the background. The linear gradients produce the solid vertical and horizontal lines whereas the radial gradients produce the dotted lines in the middle.

As you would see from the output, it is not exactly as in the image provided in question because of the dots being a bit wide apart from each other and size of the dots being larger. If we reduce the dot size, it starts looking more like dashes/square blocks instead of dots.

Note: I tried to get the dots done with just a single radial gradient but it made the dots appear above (or behind) the solid line also and hence had to do with two radial gradients.

.div-with-pattern {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(to bottom, #AAA 1px, transparent 1px), linear-gradient(to right, #AAA 1px, transparent 1px), radial-gradient(1px 1px at center, #AAA 1px, transparent 2px), radial-gradient(1px 1px at center, #AAA 1px, transparent 2px);
  background-size: 40px 60px, 120px 40px, 12px 60px, 12px 60px;
  background-position: 0px 0px, 0px 0px, 0px -10px, 0px 10px;
}
body {
  margin: 0;
  padding: 0;
}
<!-- prefix free library is only to avoid browser prefixes, it is optional -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="div-with-pattern"></div>

Below snippet shows how the pattern appears when the space between the dots is reduced. The dots can't be made much smaller than their current size because if their radius is reduced any further, they become invisible.

.div-with-pattern {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(to bottom, #AAA 1px, transparent 1px), linear-gradient(to right, #AAA 1px, transparent 1px), radial-gradient(1px 1px at center, #AAA 1px, transparent 2px), radial-gradient(1px 1px at center, #AAA 1px, transparent 2px);
  background-size: 40px 60px, 120px 40px, 6px 60px, 6px 60px;
  background-position: 0px 0px, 0px 0px, 0px -10px, 0px 10px;
}
body {
  margin: 0;
  padding: 0;
}
<!-- prefix free library is only to avoid browser prefixes, it is optional -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="div-with-pattern"></div>

Below snippet shows what happens when we reduce the size of the dots. This seems more closer to your original image because they look more like dashes to me than dots but I am not sure because your title says otherwise.

.div-with-pattern {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(to bottom, #AAA 1px, transparent 1px), linear-gradient(to right, #AAA 1px, transparent 1px), radial-gradient(1px 1px at center, #AAA .5px, transparent 1px), radial-gradient(1px 1px at center, #AAA .5px, transparent 1px);
  background-size: 40px 60px, 120px 40px, 6px 60px, 6px 60px;
  background-position: 0px 0px, 0px 0px, 0px -10px, 0px 10px;
}
body {
  margin: 0;
  padding: 0;
}
<!-- prefix free library is only to avoid browser prefixes, it is optional -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="div-with-pattern"></div>

Upvotes: 9

Related Questions