How to make a wavy line from one element to other element

Question

I just want to know if its possible to make a wavy line from one element to another element that they looks connected because of the line? I wanted to look like this: Pls check the image here wavy line

The element in html will be this:

<style>
  /** CSS style for the line here **/
</style>

<div class="row">
    <div class="col-md-4"><img src="circle img"></div>
    <div class="col-md-4"><img src="circle img"></div>
    <div class="col-md-4"><img src="circle img"></div>
</div>

Answer 1

Here is a simple approach to do so in CSS:

.element {
  height:100px;
  width:100px;
  border:2px solid black;
  margin:-5px;
}
.holder {
  /* Clip edges, as some of the lines don't terminate nicely. */
  overflow: hidden;
  position: relative;
  width: 200px;
  height: 50px;
}

.ellipse {
  position: absolute;
  background: radial-gradient(ellipse, transparent, transparent 7px, black 7px, black 10px, transparent 11px);
  background-size: 36px 40px;
  width: 200px;
  height: 20px;
}

.ellipse2 {
  top: 20px;
  left: 18px;
  background-position: 0px -20px;
}

<table><tr>
<td><div class="element">This element contains your HTML tags and stuff</div></td><td>
<div class="holder">
  <div class="ellipse"></div>
  <div class="ellipse ellipse2"></div>
</div></td><td>
<div class="element">This element contains your HTML tags and stuff</div></td>

I had to use HTML tables so that I could fit different Divs in same line. Using a table you can rotate the curved line and add it in any angle according to your needs. Using table saves you from very large and complex css styling.