将方形div与圆形div无缝连接

 .square {

   width: 200px;

   height: 200px;

   background-color: #f00;

   position: relative;

 }

 .circle {

   width: 100px;

   height: 100px;

   background-color: #00f;

   border-radius: 50%;

 }

 .square::before {

   content: "";

   position: absolute;

   width: 100px;

   height: 100px;

   background-color: #00f;

   border-radius: 50%;

   top: 50%;

   left: 100%;

   transform: translate(-50%, -50%);

 }

 <div class="circle"></div>

 <rect x="0" y="0" width="200" height="200" fill="#f00" />

 <circle cx="100" cy="100" r="100" fill="#00f" />

 <path d="M200,100 A100,100 0 0,0 100,200 L100,100 Z" fill="#00f" />

 const canvas = document.getElementById("myCanvas");

 const ctx = canvas.getContext("2d");

 ctx.fillStyle = "#f00";

 ctx.fillRect(0, 0, 200, 200);

 ctx.fillStyle = "#00f";

 ctx.beginPath();

 ctx.arc(100, 100, 100, 0, Math.PI * 2);

 ctx.closePath();

 ctx.fill();

 ctx.fillStyle = "#00f";

 ctx.beginPath();

 ctx.moveTo(200, 100);

 ctx.arcTo(200, 200, 100, 200, 100);

 ctx.lineTo(100, 100);

 ctx.closePath();

 ctx.fill();