Pointing tabs using CSS

Is there a way, using CSS, to make it so that when clicking a tab (as shown in the diagram below), the tab “points” to an inactive tab?

I have been trying various Stack Overflow snippets which successfully place the arrow above or below the tab, but none seem to work in overlapping the inactive tab next to the active tab.

This is the basic structure of my HTML:

<ul>
  <li class="active">
    <a href="#">Tab 1</a>
  </li>
  <li>
    <a href="#">Tab 2</a>
  </li>
  <li>
    <a href="#">Tab 3</a>
  </li>
</ul>

Image of the design to create