Want to put CSS arrows on adjacent divs pointing one direction
<p>I am trying to create 3 divs across with arrows in the left and centre div pointing into the div to the right. I can get the first to point into the centre but as soon as I add the code for the centre and rename the div it disappears.</p>

<p>I think I may need some kind of <code>::before</code> operator to get it to work but not sure. Basically I would like a pink div with pink arrow pointing into a cream div with cream arrow pointing into a blue div:</p>

<p><img src="https://i.stack.imgur.com/1YpoM.png" /></p>

<p>Here is the code I am using:</p>

<pre><code>.hero-box-pink {
  position: relative;
  background: #ab255c;
}

.hero-box-pink:after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(171,37,92,0);
  border-left-color: #ab255c;
  border-width: 30px;
  margin-top: -30px;
}

.hero-box-cream {
  position: relative;
  background: #fcfbe3;
}

.hero-box-cream:after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(252,251,227,0);
  border-left-color: #fcfbe3;
  border-width: 30px;
  margin-top: -30px;
}
</code></pre>

<p>Thanks in advance for any help with this.</p>