html - Create border arrow with css

Question

So I got a sketch of a designer I worked with and was wondering how I create the border arrows in the picture below

I tried to put out this font-awesome icon by using the :after selector, it got pretty ugly: http://fortawesome.github.io/Font-Awesome/icon/angle-right/

So instead, I tried to put an arrow on an arrow through this arrow generator: http://apps.eky.hk/css-triangle-generator/

It also became very ugly. So now I wonder if there is anyone who has a good idea on how to solve this?

How my html look like so far:

<div class="bx-pager bx-default-pager">

  <div class="bx-pager-item">
    <a class="bx-pager-link active" data-slide-index="0" href=""> 1. DIN EXPERT </a>
  </div>

  <div class="bx-pager-item">
    <a class="bx-pager-link" data-slide-index="1" href=""> 2. V?RA TJ?NSTER </a>
  </div>

  <div class="bx-pager-item">
    <a class="bx-pager-link" data-slide-index="2" href=""> 3. CASE </a>
  </div>

  <div class="bx-pager-item">
    <a class="bx-pager-link" data-slide-index="3" href=""> 4. KONTAKT </a>
  </div>
</div>

Answer 1

You can create triangles with CSS borders by:

border-top: 20px solid transparent; 
border-bottom: 20px solid transparent; /* 40px height (20+20) */
border-left: 20px solid green

I've created the same thing as you see above here:

#container {
  width:150px;
  height:40px;
  background-color:green;
  position:relative;
}
    
.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 20px solid transparent; 
  border-bottom: 20px solid transparent; /* 40px height (20+20) */
  border-left: 20px solid green;
  position:absolute;
  right:-20px;
}

<div id="container">
  <div class="arrow-right"></div>
</div>