如何从一个元素到另一个元素制作波浪线

问题描述

我只想知道是否可以从一个元素到另一个元素制作一条波浪线，使它们看起来因为线条而连接？我想看起来像这样： 请检查这里的图像 wavy line

html 中的元素是这样的：

<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>

解决方法

这是在 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>

我不得不使用 HTML 表格，以便在同一行中放置不同的 Div。使用表格，您可以旋转曲线并根据需要将其添加到任何角度。使用 table 可以使您免于非常庞大和复杂的 css 样式。