A CodePen by Gregor Adams.

index.html

<a class="ios-6-arrow left blue" href="#" data-title="back"></a>
<a class="ios-6-arrow left light" href="#" data-title="back"></a>
<a class="ios-6-arrow left dark" href="#" data-title="back"></a>

style.scss

@import "compass";

@import "compass/css3";
@import "compass/support";
$experimental-support-for-svg: true;
@mixin ios6-arrow-button ($theme: none){
  $button-color-bottom: #41618d;
  $button-color-top: #99aac2;
  $button-border-color-bottom: lighten($button-color-bottom, 20%);
  $button-text-shadow: 0 -1px 0 #474747;
  $button-text-color: #fff;
  @if $theme == light {
    $button-color-bottom: #cccccc;
    $button-color-top: #d4d7d4;
    $button-border-color-bottom: darken($button-color-bottom, 5%);
    $button-text-shadow: 0 1px 0 #fff;
    $button-text-color: #474747;
  } @else if $theme == dark {
    $button-color-bottom: #111;
    $button-color-top: #444;
    $button-border-color-bottom: lighten($button-color-bottom, 60%);
    $button-text-shadow: 0 -1px 0 #000;
    $button-text-color: #fff;
  }
  @include appearance(none);
  @include inline-block;
  position: relative;
  overflow: visible;
  margin: 0;
  padding: 0;
  min-width: 20px;
  height: 26px;
  border: 0;
  background: none;
  cursor: pointer;
  &.left {
    &:before {
      @include box-sizing( border-box);
      @include box-shadow(1px 2px 1px -2px rgba(0,0,0,0.4) inset, -1px 4px 2px -4px rgba(0,0,0,0.4) inset);
      @include background-image(linear-gradient(top right, $button-color-top, $button-color-bottom));
      @include background-size( 20px 18px);
      @include transform(rotate(-45deg) scale(0.86) skew(-9deg, -9deg));
      @include transform-origin(50%);
      @include inline-block;
      @include border-radius(0 6px 0 6px);
      @include border-top-right-radius(8px 5px);
      @include border-bottom-left-radius(5px 8px);
      position: relative;
      top: 0;
      left: 16px;
      width: 22px;
      height: 22px;
      content: "";
      border: {
        width: 0 0 1px 1px;
        color: transparent transparent transparent $button-border-color-bottom;
        style: solid;
      }
      background: {
        position: -2px 0;
        repeat: no-repeat;
      }
    }
    &:after {
      @include box-sizing(border-box);
      @include background-image(linear-gradient(top, $button-color-top, $button-color-bottom));
      @include background-size(26px 26px);
      @include box-shadow(0 2px 2px -2px rgba(0,0,0,0.4) inset, -1px 1px 1px -1px rgba(0,0,0,0.4) inset);
      @include text-shadow($button-text-shadow);
      @include inline-block;
      @include border-radius(4px);
      position: relative;
      top: 0;
      left: 2px;
      margin: 0;
      padding: 5px 10px 5px 5px;
      width: auto;
      height: 26px;
      color: $button-text-color;
      content: attr(data-title);
      text-decoration: none;
      white-space: nowrap;
      line-height: 16px;
      border: {
        width: 0 0 1px 0;
        color: $button-border-color-bottom;
        style: solid;
      }
      font: {
        weight: 500;
        size: 12px;
        family: "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      }
    }
  }
  &:hover:after {
    @include background-image(linear-gradient(top, darken($button-color-bottom, 20%), darken($button-color-top, 5%)));
    @include background-size(26px 26px);
  }
  &:hover:before {
    @include background-image(linear-gradient(top right, darken($button-color-bottom, 20%), darken($button-color-top, 5%)));
    @include background-size( 20px 18px);
  }
}

.ios-6-arrow.blue {
  @include ios6-arrow-button();
}
.ios-6-arrow.light {
  @include ios6-arrow-button(light);
}
.ios-6-arrow.dark {
  @include ios6-arrow-button(dark);
}