两个圆圈、一个箭头，以及 Anchor Positioning

In a previous series of articles, we studied a classic use case of anchor positioning: Tooltips. In this article, we will explore a less common use case that is a great example of the power of this new feature and modern CSS in general.

在之前的一系列文章中，我们研究了锚点定位的一个经典用例：工具提示。在本文中，我们将探索一个不太常见的用例，这是这一新功能以及现代 CSS 总体强大性的一个绝佳示例。

At the time of writing, only Chrome and Edge fully support the features we will be using.

在撰写本文时，只有 Chrome 和 Edge 完全支持我们将要使用的功能。

Let’s start with a demo. Drag both circles and see how the arrow follows the movement. You will also get the distance between the two circles inside the arrow shape. And if the circles are too close, the arrow shape changes!

让我们从一个演示开始。拖动两个圆圈，看看箭头如何跟随移动。你还会在 箭头形状内部获得两个圆圈之间的距离。 如果圆圈太近，箭头形状会改变！

Except for the drag feature, everything else is controlled using CSS. The position and shape of the arrow, the distance calculation, collision/proximity detection, etc. I know it’s hard to believe, but CSS has evolved a lot to make this possible!

除了拖动功能外，一切都使用 CSS 控制。箭头的位置和形状、距离计算、碰撞/接近检测等。我知道这很难相信，但 CSS 已经发展了很多，使得这成为可能！

“Why CSS?!”

「为什么是 CSS？！」

The classic question that always emerges in such situations. You might think this use case is not suitable for a CSS-only approach, and I agree. There are plenty of tools/libraries that rely on JavaScript and/or SVG, which do the job perfectly. So use those if you need this kind of feature.

这种情况总是会出现的一个经典问题是：你可能认为这个用例不适合纯 CSS 方法，我同意。有很多依赖 JavaScript 和/或 SVG 的工具/库，它们完美地完成了这项工作。所以，如果你需要这种功能，就使用那些工具吧。

My CSS-only demo can be seen as an experiment or an exploration of new CSS features. The goal is not to build that demo, but the steps I followed and the tricks I used to build it. Pushing the limit of CSS and creating things that sound “impossible” is the best way to learn CSS. I say “impossible” because there is plenty of stuff that I was not able to build, but when I succeed, I am here to write an article about it.

我的纯 CSS 演示可以视为对新 CSS 特性的实验或探索。目标不是构建那个演示，而是我遵循的步骤和我用来构建它的技巧。推动 CSS 的极限并创建听起来“impossible”的事物是学习 CSS 的最佳方式。我说“impossible”是因为有很多东西我无法构建，但当我...