title: Create border arrow with css
body: <p>So I got a sketch of a designer I worked with and was wondering how I create the border arrows in the picture below</p>
  
  <p><img src="https://i.stack.imgur.com/Vndaf.png" alt="borderarrow"></p>
  
  <p>I tried to put out this font-awesome icon by using the  <strong>:after</strong> selector, it got pretty ugly:
  <a href="http://fortawesome.github.io/Font-Awesome/icon/angle-right/" rel="noreferrer">http://fortawesome.github.io/Font-Awesome/icon/angle-right/</a></p>
  
  <p>So instead, I tried to put an arrow on an arrow through this arrow generator:
  <a href="http://apps.eky.hk/css-triangle-generator/" rel="noreferrer">http://apps.eky.hk/css-triangle-generator/</a></p>
  
  <p>It also became very ugly. So now I wonder if there is anyone who has a good idea on how to solve this?</p>
  
  <p>How my html look like so far:</p>
  
  <pre><code>&lt;div class="bx-pager bx-default-pager"&gt;
  
    &lt;div class="bx-pager-item"&gt;
      &lt;a class="bx-pager-link active" data-slide-index="0" href=""&gt; 1. DIN EXPERT &lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="bx-pager-item"&gt;
      &lt;a class="bx-pager-link" data-slide-index="1" href=""&gt; 2. VÅRA TJÄNSTER &lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="bx-pager-item"&gt;
      &lt;a class="bx-pager-link" data-slide-index="2" href=""&gt; 3. CASE &lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="bx-pager-item"&gt;
      &lt;a class="bx-pager-link" data-slide-index="3" href=""&gt; 4. KONTAKT &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>