如何使用 CSS 或 javascript 制作金字塔连接圆？

Question

如何使用 CSS 或 Javascript 制作金字塔连接圆圈？

Answer 1

margin-left: 100px;
height: 109px;
background-color: red;
width: 3px;
-ms-transform: rotate(20deg);
/* -webkit-transform: rotate(20deg); */
transform: rotate(29deg);

Answer 2

您可以使用HTML5 Canvas画线和画圆。

示例：

function drawCircle(ctx, x, y, r){
  ctx.beginPath();
  ctx.arc(x,y,r,0,2*Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
  ctx.stroke();
}

function drawLine(ctx, fromX, fromY, toX, toY){
  ctx.moveTo(fromX,fromY);
  ctx.lineTo(toX,toY);
  ctx.stroke();
}

function drawCircleAndLine(ctx, fromX, fromY, toX, toY, r){
 drawLine(ctx, fromX, fromY, toX, toY);
 drawCircle(ctx, fromX, fromY, r);
  drawCircle(ctx, toX, toY, r);

}

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

//Defines your node here
drawCircleAndLine(ctx, 300, 100, 400, 200, 40);
drawCircleAndLine(ctx, 300, 100, 200, 200, 40);
drawCircleAndLine(ctx, 400, 200, 500, 300, 40);
drawCircleAndLine(ctx, 200, 200, 100, 300, 40);

<canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

JS Fiddle: https://jsfiddle.net/5cp4pzL9/

如何使用 CSS 或 javascript 制作金字塔连接圆？

How to make a Pyramid connect circle using CSS or javascript?

javascript

css

connect