Question

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

我创建了在桌面浏览器上完美运行的按钮（即9 +，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

我可以在Chrome for Windows中重现相同的问题，更改缩放级别。

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

.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，因此它可以很好地满足您的需求。

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

1 个答案:

demo