【问题标题】：CSS hexagon not rendering correctly on AndroidCSS 六边形无法在 Android 上正确呈现
【发布时间】：2013-06-26 09:18:55
【问题描述】：

我创建了一个纯 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;
}

感谢所有帮助。

【问题讨论】：

可以参考这个链接css-tricks.com/examples/ShapesOfCSS
这可能是我一段时间以来给出的最长答案，希望对您有所帮助
非常感谢@Juan。我希望我可以只用一个元素和生成的内容来实现它，但这会做到，我还更新了我的 Fiddle。通过一些定位，我可以使圆角工作。因为旧版浏览器不广泛支持转换。
@MisterMelotte 小心 :before 和 :after，它们在旧版浏览器中也没有得到很好的支持。很高兴你成功了，欢迎使用 stackoverflow

标签： android css cross-browser

【解决方案1】：

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

三角形，失去边界半径
以边框半径旋转的矩形

三角形，失去边界半径

避免使用:before 和: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;
}

演示： Fiddle

输出：

以边框半径旋转的矩形

也可以通过将矩形旋转 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;
}

演示： Fiddle

输出：

【讨论】：