Transparent arrow in between 2 <sections>
<p>How do I make a transparent arrow that is between 2 sections? Both sections have its background-image and with <code>background-size: cover</code>.</p>

<p>An example:</p>

<p><a href="https://i.stack.imgur.com/8AQ1R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8AQ1R.png" alt="Arrow in between 2 sections"></a></p>

<p>I have been researching for various methods but most I found are usually <a href="https://stackoverflow.com/questions/23758922/transparent-arrow-triangle">making of a transparent arrow across a single image</a>, or making of <a href="http://www.cssarrowplease.com/" rel="nofollow noreferrer">CSS triangle</a>, both of which I believe do not work for this case.</p>

<p><a href="http://codepen.io/uzyn/pen/aNggJW" rel="nofollow noreferrer">A snippet on what I have so far</a>. I would be okay even if it's not a pure CSS solution but I cannot find a way to do it reliably with a variable width.</p>