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中使用。

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

三角形，失去边界半径

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

DEMO： 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;
}

DEMO： Fiddle

<强>输出：