如何在 html 和 CSS 中绘制此图表？ [关闭]答案

【问题标题】：How to draw this chart in html and CSS? [closed]如何在 html 和 CSS 中绘制此图表？ [关闭]
【发布时间】：2015-05-31 12:38:37
【问题描述】：

请问如何用 HTML 和 CSS 制作这个图表？？

圆圈是按钮的地方..

【问题讨论】：

这不是代码生成服务，请自行尝试并就您遇到问题的代码提出问题。
使用图像映射。 Here is an image map generator。几乎不需要任何编码技能。

标签： css html flowchart

【解决方案1】：

使用以下内容：
您的基本圈子：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50px;  /*Make it a circle (border-radius = 1/2*width & height)*/
  background-color: hotPink;
  border: none;
}

<button class="circle">Motion Detection</button>
<!-- Using a button to generate the circle -->

然后使用position: absolute; 和left 和right 属性来定位圆圈。

在页面中间放置一个“Live”：

<style>
 #text {
    font-family: MyFont, sans-serif;
    color: white;
 }
<style>

对于线条，我将使用 div，并给它们 2px 的高度和任何宽度（例如 350px）。对于定位，再次使用 position 属性（在此处了解如何使用它：w3schools.com /css/css_positioning.asp) – joe_young 刚刚编辑

使用上面的方法来帮助你创建你想要的，但正如已经说过的，

这不是代码生成服务，请自行尝试并就遇到问题的代码提出问题。

换句话说，试一试，当您尝试并遇到特定问题时再联系我们。
祝你好运

【讨论】：

但是如何将连接添加到每个圆圈作为图像并保持它们的正确位置？
对于我会使用divs的线条，并给它们一个高度2px和一个曾经的宽度（例如350px。）对于定位，再次使用@987654331 @property（在这里了解如何使用它：w3schools.com/css/css_positioning.asp）