android - CSS 六边形无法在 Android 上正确呈现

Question

我创建了一个纯 css 六边形，它可以在除某些 Android 浏览器之外的所有浏览器上正常呈现，例如：Galaxy Note。生成的内容创建的圆角三角形未正确呈现。

我创建了一个小提琴来显示我的代码。 http://jsfiddle.net/mistermelotte/r8X8c/

HTML

<span class="hexagon"></span>

CSS

.hexagon {
    position: relative;
    margin: 1em auto;
    width: 80px;
    height: 55px;
    border-radius: 5px;
    background: #a0d1e6;
    display: block;
}
.hexagon:before {
    position: absolute;
    top: -19px;
    left: 0;
    width: 0;
    height: 0;
    border-right: 40px solid transparent;
    border-bottom: 20px solid #a0d1e6;
    border-left: 40px solid transparent;
    border-radius: 5px;
    content:"";
}
.hexagon:after {
    position: absolute;
    bottom: -19px;
    left: 0;
    width: 0;
    height: 0;
    border-top: 20px solid #a0d1e6;
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
    border-radius: 5px;
    content:"";
}
.lt-ie9 .hexagon:before {
    top: -20px;
}
.lt-ie9 .hexagon:after {
    bottom: -20px;
}

感谢所有帮助。

Answer 1

这个答案包含两种不同的解决方案，它们都经过测试可以在我的 nexus 4 股票浏览器和 chrome 中运行。

• 三角形，失去边界半径
• 使用边框半径旋转的矩形

三角形，失去边界半径

避免:beforeand:after方法似乎可以解决问题，我已经在我的移动设备（要求的 Android）上测试了以下代码，它们运行良好，在这种特殊情况下的问题是缺少圆角。这是通过将三角形放置在矩形的顶部和底部来创建的，从而产生六边形的效果。再一次，在这里我无法控制边界半径属性。

HTML：

<div id='hexagon'>
    <div id="top"></div>
    <div id="content"></div>
    <div id="bottom"></div>
</div>

CSS：

#hexagon #content {
    width: 104px;
    height: 60px;
    background-color: #6C6;
}
#hexagon #top {
    width: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
#hexagon #bottom {
    width: 0;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}

演示： 小提琴

输出：

使用边框半径旋转的矩形

它也可以通过将矩形旋转 60 度来实现，在这个中我也避免使用伪类:before和:after，这个选项确实允许圆角，所以它可能更适合您的特定问题：

HTML

<div id='hexagon'>
    <div id="corner-1"></div>
    <div id="content"></div>
    <div id="corner-2"></div>
</div>

CSS

#hexagon {
    width:100px;height:57px;
    background-color: #6C6;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: auto 173px;
    position: relative;
    margin:40px 5px;
    text-align:center;
    zoom:1;
}
#hexagon #corner-1 {
    z-index:-1;
    transform:rotate(60deg);
    -ms-transform:rotate(60deg);
    -webkit-transform:rotate(60deg);
}
#hexagon #corner-2 {
    z-index:-1;
    transform:rotate(-60deg);
    -ms-transform:rotate(-60deg);
    -webkit-transform:rotate(-60deg);
}
#hexagon #corner-1, #hexagon #corner-2 {
    position: absolute;
    top:0;
    left:0;
    width:100%; height:100%;
    background: inherit;
    z-index:-2;
    overflow:hidden;
    backface-visibility: hidden;
}

最后，设置边框半径（对于这个尺寸，任何大于 3-4px 的东西都会导致奇怪的角落，并且可能需要对位置进行一些摆弄才能更正。

#hexagon, #corner-1, #corner-2 {
    border-radius:3px;
}

演示： 小提琴

输出：