可以通过以下几种方式实现:
示例代码:
<style>
.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%);
}
</style>
<div class="square">
<div class="circle"></div>
</div>
推荐的腾讯云相关产品:无
示例代码:
<svg width="200" height="200">
<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" />
</svg>
推荐的腾讯云相关产品:无
示例代码:
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
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();
</script>
推荐的腾讯云相关产品:无
以上是三种常见的将方形div与圆形div无缝连接的方法,具体选择哪种方法取决于实际需求和使用场景。
领取专属 10元无门槛券
手把手带您无忧上云