CSS 三角形：容器和三角形之间的细边框（iPad / Landscape iPhone）

Question

我在使用 CSS 三角形时遇到了一个非常具体的问题：

我创建的按钮可以在桌面浏览器（ie9+、ff、chrome、safari）和 iPhone 纵向模式下完美运行...这个问题存在于 iPad（视网膜和非视网膜）以及 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

任何帮助将不胜感激 - 谢谢！

Answer 1

我可以在 Windows 版 Chrome 中重现同样的问题，改变缩放级别。

至少在这种情况下，将这个值改为十进制就解决了：

.cta-watch.large span:before {
    ...
    top: -13.7px;

可能对你有帮助吗？

另一种可能性是改变创建六边形的方式。不用三角形的方式，你可以试试多背景的方式：

.hexagon {
    position: absolute;
    left: 20px;
    top: 20px;
    font-size: 80px;
    height: 2em;
    width: 1.732em;
    background-size: 50.5% 50.5%; 
    background-image: -webkit-linear-gradient(300deg,transparent 33%, red 0%), -webkit-linear-gradient(240deg,transparent 33%, red 0%),                        -webkit-linear-gradient(60deg,transparent 33%, red 0%),                        -webkit-linear-gradient(120deg,transparent 33%, red 0%);
    background-repeat: no-repeat;
    background-position: top left, top right, bottom left, bottom right;
}

它基于响应式 em，因此可以很好地满足您的需求。

demo