title: How to make left and right arrow in css?
body: <p>I have a screenshot as shown below which I have to replicate in HTML/CSS. In the following screenshot I wasn't able to make <strong>colored left and right arrows</strong> in between the squares. 
  <a href="https://i.stack.imgur.com/As4Qc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/As4Qc.png" alt="enter image description here"></a></p>
  
  <p><br>
  At this moment, I am able to replicate this in <a href="https://jsfiddle.net/nepgqcjL/1/embedded/result/" rel="nofollow noreferrer">fiddle</a> <strong>without colored left and right arrows</strong>.  </p>
  
  <p>The snippets of CSS code which I have used in order to make series of small squares are: </p>
  
  <pre><code>.squares .square {
    width: 200px;
    text-align: center;
    height: 200px;
    background-color: white;
    border-radius: 15px;
  }
  </code></pre>
  
  <p><br><br>
  <strong>Problem Statement:</strong></p>
  
  <p>I am wondering what CSS codes I should add in the fiddle so that <strong>colored left and right arrows</strong> <strong>in between the squares</strong> shows up in the fiddle. </p>