Dois círculos, uma conexão: como usar border-shape com anchor positioning e shape() no CSS

O tutorial usa o anchor-name, parte da configuração de CSS anchor positioning, como base para ligar dois círculos arrastáveis com um conector que acompanha ambos. O texto sobre border-shape é a segunda parte de uma série: a lógica de ancoragem vem do primeiro artigo (seção "Linking the Circles"), e aqui só muda a criação das formas. Importante separar as coisas: o autor do tutorial descreve uma técnica de CSS, não um projeto ou biblioteca com repositório próprio. A fonte não identifica o autor nesta ficha.

A ideia central: border-shape remodela o elemento inteiro e preserva borda, sombra e outline, ao contrário do clip-path, que corta tudo. Com shape() desenha-se uma curva entre dois pontos, e a propriedade border define espessura e cor. Os problemas aparecem em sequência. A estrutura usa quatro elementos, um por posição possível, e só um fica visível porque os outros têm tamanho 0. Com border, todos ganham tamanho, então a solução é mover o border-shape para um pseudo-elemento e usar overflow: hidden no elemento principal. Depois vêm o alinhamento (border-box como segundo valor) e o overflow cortando parte da forma, resolvido com opacity via sign() e unidades 1cqw e 1cqh, ou com display combinado a if(). Segundo o autor, a versão com display é mais sólida porque remove o elemento de vez. O ajuste final usa inset: -12px (borda de 12px) com padding-box no lugar de border-box.

Na sequência, a forma vira uma curva espelhada com o comando smooth, e passa a ser condicional: abaixo de 200px de distância vertical ou horizontal, vira linha reta. A versão melhor mantém a mesma estrutura e só altera valores, o que permite transição suave. O outro pseudo-elemento pode desenhar as extremidades (círculos, setas com clip-path e shape(), variáveis CSS e funções matemáticas). Limitação real: só Chrome e Edge dão suporte completo, e as demos em Firefox e Safari provavelmente não aparecem corretas.

Para quem desenvolve interfaces com diagramas, conectores ou grafos, isso aponta para um caminho sem JavaScript para recalcular linhas a cada arraste. Como o suporte ainda se limita a Chrome e Edge, a leitura prática é tratar como experimento ou aprimoramento progressivo, não como base de produção ampla.