CSS hexagon not rendering correctly on Android

问题

I have created a pure css hexagon which renders fine on all browsers except on some Android Browsers e.g.: Galaxy Note. The rounded triangles created by the generated content are not rendered correctly.

I have created a fiddle to show my code. 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;
}

All help is appreciated.

回答1:

This answer contains two different solutions both tested to be working in my nexus 4 stock browser and chrome.

• Triangles, losing the border radius
• Rectangles rotated with border radius

Triangles, losing the border radius

Avoiding the :before and :after approach seems to fix the issue, I've tested the following code on my mobile devices (Android as asked) and they work perfectly, the problem in this particular case is the lack of rounded corners. This one is created by positioning the triangles on top and bottom of a rectangle giving the effect of an hexagone. Once again, here I cannot control the border radius property.

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

OUTPUT:

Rectangles rotated with border radius

It can also be achieved by rotating rectangles 60 degrees, in this one I also avoid the use of the pseudo clases for :before and :after, this option does allow rounded corners so it may be more suitable for your particular question:

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

And finally, set the border radius (for this size, anything greater than 3-4px results in strange corners and would probably require some fiddling with the positions to correct.

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

DEMO: Fiddle

OUTPUT:

来源：https://stackoverflow.com/questions/17316116/css-hexagon-not-rendering-correctly-on-android