CSS六角形无法在Android上正确呈现

本文介绍了CSS六角形无法在Android上正确呈现的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我创建了一个纯CSS六边形，可以在所有浏览器上正常显示，但某些Android浏览器（例如：Galaxy Note）除外。由生成的内容创建的圆角三角形无法正确呈现。

我创建了一个小提琴来显示我的代码。

输出：

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. jsfiddle/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.

解决方案

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: