iphone - CSS の三角形: コンテナーと三角形の間の細い境界線 (iPad / 横長の iPhone)

Question

CSS三角形を使用して、非常に具体的な問題に直面しています:

デスクトップ ブラウザー (ie9+、ff、chrome、safari)、および縦向きモードの iPhone で完全に機能するボタンを作成しました。ボタンは、メイン コンテナーと配置した css 三角形の間の線でレンダリングされます。

imgurのスクリーンショットは次のとおりです。

http://imgur.com/d0k6lP2

私が使用しているコードは次のとおりです。

HTML:

<a href="#" class="cta-watch large"><span>BUTTON SHAPE</span></a>

CSS (これはより大きなファイルから貼り付けられているため、無関係なスタイルが含まれている可能性があります):

.cta-watch {
        display: inline-block;
        position: relative;
        padding: 0 10px;
        background-color: #91a1a8;
        border-collapse: collapse;
        color: white;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-style: normal;
        letter-spacing: 2px;
        font-weight: 400;
        font-size: 30px;
        letter-spacing: 2px;
        text-transform: uppercase;
        line-height: 40px;
        text-decoration: none;
        transform: rotate(360deg);
    }
    .cta-watch.large {
        display: inline-block;
        position: relative;
        width: 34px;
        height: 32px;
    }

.cta-watch.large:hover {
  text-decoration: none;
}

.cta-watch.large.arrow-left::after, .cta-watch.large.arrow-right::after {
  border-left: none;
  border-right: none;
}

.cta-watch.large span {
  display: inline-block;
  width: 0;
  height: 0;
  text-indent: -99999px;
}

.cta-watch.large span:before {
  width: 0;
  height: 0;
  content: '';
  border-color: transparent transparent #91a1a8 transparent;
  border-width: 0 27px 14px 27px;
  border-style: solid;
  position: absolute;
  top: -14px;
  left: 0;
}

.cta-watch.large span:after {
  width: 0;
  height: 0;
  content: '';
  border-color: #91a1a8 transparent transparent transparent;
  border-width: 14px 27px 0 27px;
  border-style: solid;
  position: absolute;
  bottom: -14px;
  left: 0;
}

.cta-watch.large:before {
  display: block;
  width: 100%;
  height: 0;
  content: '\25BA';
  color: white;
  font-family: arial, "Helvetica Neue", Helvetica, sans-serif;
  margin-left: 3px;
  font-size: 22px;
  line-height: 34px;
  text-align: center;
}

ここにコードデモを表示するJSBin: http://jsbin.com/ocaGeja/1

どんな助けでも大歓迎です - ありがとう!