CODEWITHSUNDEEP
css
Jake Lam
Jake Lam

Reputation: 3452

How to create custom dashed line

I want to create a component where it has a dashed line that looks like this, basically I want to add a border-radius to each dash, that make it curves like in the picture.

enter image description here

Here what I try so far:

.line {
  height: 12px;
  background: repeating-linear-gradient(to right,#52cc7a 0,#52cc7a 6px,transparent 6px,transparent 18px)
}
<div class="line"></div>

Upvotes: 2

Views: 2856

Answers (2)

A Haworth
A Haworth

Reputation: 36512

We can draw several background images. Using circles for the top and bottom 'roundy' bits and a rectangle in the middle we can achieve something like in this snippet - the circles have been given different colors just to show what is going on, and the size has been magnified so we can check more easily on alignment.

I'm on a very old screen and the edges look a bit jagged but I'm hoping on a better display like retina it will seem smoother.

.line {
  height:100px;
  width: 100vw;
  background-image: radial-gradient(cyan 0, cyan 12px, transparent 12px, transparent 100%),radial-gradient(magenta 0, magenta 12px, transparent 12px, transparent 100%),linear-gradient(to right,#52cc7a 0,#52cc7a 24px,transparent 24px,transparent 100%);
  background-size: 60px 60px, 60px 60px, 60px 60px;
  background-position: -18px -15px, -18px 39px, 0 12px;
  background-repeat: no-repeat no-repeat, no-repeat no-repeat, no-repeat no-repeat;
  }
<div class="line"></div>

Of course, there needs to be fiddling around with sizes to get the exact spacing you want, and some thinking about what should happen on small screens versus large ones, how does it all fit in with the font size and so on.

Anyway, here's a snippet with the colors the same and repeated background images.

.line {
          height:100px;
          width: 100vw;
          background-image: radial-gradient(#52cc7a 0, #52cc7a 12px, transparent 12px, transparent 100%),radial-gradient(#52cc7a 0, #52cc7a 12px, transparent 12px, transparent 100%),linear-gradient(to right,#52cc7a 0,#52cc7a 24px,transparent 24px,transparent 100%);
          background-size: 60px 60px, 60px 60px, 60px 60px;
          background-position: -18px -15px, -18px 39px, 0 12px;
          background-repeat: repeat no-repeat, repeat no-repeat, repeat no-repeat;
          }
<div class="line"></div>

Upvotes: 2

Temani Afif
Temani Afif

Reputation: 273086

You can approximate it with a radial gradient:

.line {
  height: 12px;
  background: 
   radial-gradient(4px 8px, #52cc7a 80%,transparent 87%) 0 0/20px 100%;
   
}
<div class="line"></div>

Upvotes: 3

Related Questions