如何制作从一个元素到另一个元素的波浪线[关闭]

Posted 2023-03-06

【中文标题】如何制作从一个元素到另一个元素的波浪线[关闭]

【英文标题】：How to make a wavy line from one element to other element [closed]

【发布时间】：2021-09-02 21:53:31

【问题描述】：

我只是想知道是否有可能从一个元素到另一个元素形成一条波浪线，因为这条线它们看起来是相连的？我想看起来像这样： 请在这里查看图片 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>

【问题讨论】：

把整个东西变成图像

或者更好地使用 SVG

使用透明的 SVG 文件并将圆圈放在上面。使用 CSS z-index 属性

【参考方案1】：

这是在 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 样式。