How to make dashed wave line in css-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

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%;
}

CodePudding user response：

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>