CSS Tip

Connecting Circles With Anchor Positioning II

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

CSS-only connected circles with distance

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 {
  /* arrow dimension */
  --r: 25px;
  --a: 40deg;
  --d: 5px;
  /**/
  --g: 10px; /* gap between the arrow and circles */
  --c: #556270;
}

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

⚠️ Chrome-only for now ⚠️

See the Pen Connected Circles with Anchor Positioning II by Temani Afif (@t_afif) on CodePen.

And another demo with more than two circles

See the Pen Connected Circles with Anchor Positioning II by Temani Afif (@t_afif) on CodePen.

More CSS Tips