How to make dashed wave line in css

Question

i wanted to make the background line a dashed wavy line tried using div with border-style: dashed and border-radius, but couldn't achieve it. how to make this marked line (refer to attached image) as background in CSS.

I am not sure if you can achieve this with plain CSS. I would use SVG as background image. — Jax-p
– Jax-p, Commented Nov 22, 2021 at 8:36
You might be able to achieve using an element with a radius and some elements to "cover" it so it will "cut" and hide the other part of the circle, but that route is quite hacky. — I am L
– I am L, Commented Nov 22, 2021 at 8:52

I am L · Accepted Answer · 2021-11-22 09:52:26Z

3

The only thing that I can think about (without having javascript/svg and just pure html and css) is to combine border-style: dashed, border-radius and a couple of "cover" elements to "cut" and hide the radial elements.

check this one. https://jsfiddle.net/fco0v79p/1/ (just need to proper position it to make it flawless)

Although I'm warning you that this is quite hacky, tedious, and inflexible.

edited Nov 22, 2021 at 9:52

answered Nov 22, 2021 at 9:19

I am L

4,6806 gold badges38 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kiran Mistry · Accepted Answer · 2021-11-22 09:56:33Z

2

you can simply use Hr tag for horizontal line and apply styling on the top of that like this.

hr {
  border:none;
  border-top:1px dotted #f00;//or use can use dahshed
  color:#fff;
  background-color:#fff;
  height:1px;
  width:50%;
}

edited Nov 22, 2021 at 9:56

Kiran Mistry

2,7253 gold badges14 silver badges29 bronze badges

answered Nov 22, 2021 at 9:55

salik saleem

8677 silver badges27 bronze badges

Comments

aekit · Accepted Answer · 2021-11-22 10:07:55Z

I think this is not done by CSS. it is probably SVG or PNG.

here is the link to PNG you can use => wave.png

If you want to do it with CSS maybe you can use the code below. (but with straight lines for less problem)

/* just setting up background*/
*{
margin:0;
padding:0;
}

.parent-dashed{
background-color:#181A2F;
height:100vh;
width:100%;
}

/* main css */
.dashed{
width:200px;
border:none;
border-bottom:10px dashed #e7e7e7;
position:absolute;
}

/* position lines where you want */
.line1{
top:35%;
transform:rotate(3deg);
}
.line2{
top:30%;
right:0;
transform:rotate(-3deg);
}
.line3{
top:80%;
right:0;
transform:rotate(5deg);
width:500px;
}

<div class='parent-dashed'>
  <div class='dashed line1'></div>
  <div class='dashed line2'></div>
  <div class='dashed line3'></div>
</div>

Collectives™ on Stack Overflow

How to make dashed wave line in css

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related