Squiggly line using CSS3 - html

Question

I have to draw a squiggly line and that needs to be drawn using CSS3. The squiggly line should look like the image attached.
I tried to create using CSS ONLY, but not able to get it right. Any help is appreciated. Here is the fiddle I created https://jsfiddle.net/anirbankundu/myzmknLu/
.jagged-edge{
display: inline-block;
background-color: none;
border-left: none;
width: 1%;
height: 20px;
position: relative;
right: 1%;
}
.jagged-edge:after {
content: '';
position: absolute;
background: linear-gradient(-20deg,transparent 0,transparent
45%,#bcbcbc 45%,#bcbcbc 50%,#C4DCED 50%,#C4DCED 100%) 0 3px,linear-
gradient(-155deg,transparent 0,transparent 45%,#bcbcbc 45%,#bcbcbc
50%,#C4DCED 50%,#C4DCED 100%) 0 3px;
background-size: 100% 6px;
width: 100%;
height: 100%;
left: 45%;
z-index: 0;
}
<div class="jagged-edge">
</div>

Answer 1

I believe this is what you are looking for. I'm sure there could be a more semantic approach but this gets it done. Play with the settings to achieve precise visual. Cheers
$color: #336699;
.wrapper {
padding: 50px;
}
.top-line {
background-color: $color;
display: block;
height: 50px;
position: relative;
width: 3px;
&:after {
background-color: $color;
bottom: -6px;
content: '';
display: block;
height: 3px;
position: absolute;
transform: rotate(25deg);
width: 30px;
}
}
.middle-line {
background-color: $color;
bottom: -10px;
display: block;
height: 3px;
left: -20px;
position: relative;
width: 50px;
}
.bottom-line {
background-color: $color;
display: block;
height: 50px;
margin-top: 20px;
position: relative;
width: 3px;
&:before {
background-color: $color;
content: '';
display: block;
height: 3px;
left: -21px;
position: absolute;
top: -7px;
transform: rotate(25deg);
width: 25px;
}
}
https://codepen.io/garynorris88/pen/yXGYMM

Answer 2

For what it's worth, here's an SVG that you could use as a background on an element to the right or left side of the div.
<svg viewbox="0 0, 20, 70" height="70">
<path d="M 10 0 L 10 30 L 16 35 L 4 35 L 10 40 L 10 70" stroke="#555" stroke-width="2" stroke-linejoin="round" fill="none"/>
</svg>

Answer 3

So the line looks like it has a sideways 'z' in it to me. So I used css to add a one (rotated) via :before pseudo class.
If you like it I can try to tweak as I see a 1 pixel gap and your squiggly is a bit more 'smushed'
Markup:
.squiggly-line {
height: 100px;
border-left: 2px solid #4c6675;
position: relative;
}
.squiggly-line:before {
content: 'z';
font-size: 22px;
position: absolute;
top: 40%;
left:-6px;
background: white;
line-height: 9px;
vertical-align: -2px;
display: inline-block;
transform: rotate(49deg) scaleY(0.7);
color: #4c6675;
font-weight: 600;
font-family: 'Arial';
}
<div class="squiggly-line"></div>
<div class="squiggly-line"></div>
CSS:
.squiggly-line {
height: 100px;
border-left: 2px solid #888;
position: relative;
}
.squiggly-line:before {
content: 'z';
font-size: 22px;
position: absolute;
top: 40%;
left:-6px;
background: white;
line-height: 9px;
vertical-align: -2px;
display: inline-block;
transform: rotate(40deg);
color: #888;
font-weight: 600;
font-family: 'Arial';
}

Answer 4

Use a .svg file for this task and let other browser use a straight line, is what I would do today, because I find that cleaner.
Gimp is a nice program for creating vector graphics, be sure to use crop document to content feature and I'd set the dimensions correctly in the svg as well, save a few lines of css (instead of using other width property).
But you can have older browsers use a png as well (if you care about ~5% of users not seeing that line using this technique):
background: url(../old-browsers.png);
background: linear-gradient(transparent, transparent), url(../path/to/svg);
/*width: something */
Advantage: more freedom and ease
Con: less visually attractive for a small group of users

Answer 5

You may also give a look at background-image and background-size using gradients to draw each bits through a single class and no extra markup:
.jagged {
background:
linear-gradient(0deg, turquoise, turquoise) no-repeat 1em top,
linear-gradient(0deg, turquoise, turquoise) no-repeat 1em bottom ,
linear-gradient(-45deg, transparent 48%, turquoise 48%,turquoise 53%, transparent 53%) no-repeat -0.15em calc(50% + 0.25em),
linear-gradient(-45deg, transparent 48%, turquoise 48%,turquoise 53%, transparent 53%) no-repeat -0.65em calc(50% - 0.25em),
linear-gradient(90deg, turquoise ,turquoise ) no-repeat 0.5em 50%
gold /* you can add here a bg-color or add another background-image */;
background-size:
2px calc(50% - 0.5em),
2px calc(50% - 0.5em) ,
3em 0.5em,
3em 0.5em,
1em 1px ;
padding:2em;
}
/* example bis */
.jagged + .jagged {
background:
linear-gradient(0deg, turquoise, turquoise) no-repeat 1em top,
linear-gradient(0deg, turquoise, turquoise) no-repeat 1em bottom ,
linear-gradient(-45deg, transparent 48%, turquoise 48%,turquoise 53%, transparent 53%) no-repeat -0.15em calc(50% + 0.25em),
linear-gradient(-45deg, transparent 48%, turquoise 48%,turquoise 53%, transparent 53%) no-repeat -0.65em calc(50% - 0.25em),
linear-gradient(90deg, turquoise ,turquoise ) no-repeat 0.5em 50%,
url(http://lorempixel.com/600/800/nature/6) ;
background-size:
3px calc(50% - 0.5em),
3px calc(50% - 0.5em) ,
3em 0.5em,
3em 0.5em,
1em 2px,
cover;
color:turquoise;
text-shadow: 0 0 1px black;
font-size:1.5em;
<p class='jagged'>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p><p class='jagged'>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
https://codepen.io/gc-nomade/pen/weRMBJ