如何使用CSS或JavaScript製作金字塔連接圈？

Question

如何使用CSS或Javascript製作金字塔連接圈？

Answer 1

您可以使用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){ 
 
\t drawLine(ctx, fromX, fromY, toX, toY); 
 
\t 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小提琴：https://jsfiddle.net/5cp4pzL9/

Answer 2

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