使用 Anchor Positioning 连接圆圈 II

January 08, 2026

2026年1月8日

Improving the previous implementation to include the calculation of the distance between both circles inside the arrow shape.

改进之前的实现，以在箭头形状内部包含两个圆圈之间距离的计算。

Still the same code structure

仍然是相同的代码结构

<div class="circle" name="--a" size="150px"></div><div class="circle" name="--b" size="100px"></div><div class="arrow" x="--a" y="--b" size_x="150px" size_y="100px"> ...</div>

.arrow {  --r: 25px; --a: 40deg; --d: 5px;  --g: 10px;  --c: #556270;}

Drag the circles in the demo below and see how the value updates:

拖动下方演示中的圆圈，查看值如何更新：

⚠️ Chrome-only for now ⚠️

⚠️ 目前仅限 Chrome ⚠️

And another demo with more than two circles

以及另一个带有超过两个圆圈的演示

• Recreating the component and its
  Using basic HTML and a few lines of CSS to recreate the fieldset component. January 21, 2026
• 重新创建 组件及其
  使用基本的 HTML 和几行 CSS 重新创建 fieldset 组件。2026年1月21日
• Connecting Circles With Anchor Positioning Using modern CSS to create a dynamic link that connects two circles, whatever their position. December 16, 2025
• 使用锚点定位连接圆圈 使用现代 CSS 创建一个动态链接，无论两个圆圈位于何处，都能将它们连接起来。2025年12月16日
• Fizz Buzz using Modern CSS (no HTML) A fun experiment using modern CSS to create the classic Fizz Buzz. December 06, 2025
• Fizz Buzz 使用现代 CSS（无 HTML） 一个使用现代 CSS 创建经典 Fizz Buzz 的有趣实验。2025年12月6日