add an arrow infront and after a div
<p>I tried to add an arrow shape to a div. i managed to add it to the end of the div but i am struggling to figure out how to add it to the front as well without using a new class. Is it possible to achieve it with only one class?</p>

<p><a href="https://i.stack.imgur.com/cfUbB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cfUbB.png" alt="example"></a></p>

<p>edit: my answer to the question with a different shape approach,
i think they are all 3 very useful:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.arrow {
  margin-left: 100px;
  position: relative;
  background: pink;
  width: 400px;
  height: 100px;
  text-align:center;
  line-height:100px;
  margin-bottom:10px;
}

.arrow:after {
  border: solid transparent;
  content: " ";
  position: absolute;
  border-bottom-color: white;
  border-width: 50px;
  left: 0;
  top: 0;
  transform: rotate(90deg);
}

.arrow:before {
  border: solid transparent;
  content: " ";
  position: absolute;
  border-bottom-color: pink;
  border-width: 50px;
  left: 400px;
  top: 0;
  transform: rotate(90deg);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="arrow"&gt;
  1
&lt;/div&gt;
&lt;div class="arrow"&gt;
  2
&lt;/div&gt;</code></pre>
</div>
</div>
</p>