CSSまたはJavaScriptを使用してピラミッド接続サークルを作成するにはどうすればよいですか？

Question

CSSまたはJavascriptを使用してピラミッド接続円を作成するにはどうすればよいですか？

Answer 1

あなたは、線や円を描くようにHTML5 Canvasを使用することができます。

Exmaple：

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