我已經創建了一個純CSS css六邊形，它在所有瀏覽器上呈現效果都很好，除了某些Android瀏覽器（例如Galaxy Note）外。生成的內容創建的圓角三角形不能正確渲染。CSS hexagon在Android上無法正確顯示

我創建了一個小提琴來展示我的代碼。 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; 
}

所有幫助表示讚賞。

來源

2013-06-26 Mister Melotte

您可以參考此鏈接http://css-tricks.com/examples/ShapesOfCSS/ – Narendra

這可能是我在一段時間內給出的最長的答案，希望它可以幫助 –

非常感謝@Juan。我希望我可以用一個元素和生成的內容來實現它，但是這樣做，我也更新了我的小提琴。通過一些定位，我可以使圓角工作。因爲舊版瀏覽器沒有廣泛支持轉換。 –

這個答案包含兩個不同的解決方案，都經過測試，可以在我的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

OUTPUT：

enter image description here

矩形與圓角半徑旋轉

也可以通過旋轉矩形60度，在這一塊我也避免:before和:after使用僞clases的實現，此選項確實允許圓角落，因此它可能更適合於特定的問題：

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

OUTPUT：

enter image description here

來源

2013-06-26 09:47:34

CSS hexagon在Android上無法正確顯示

回答

三角形旋轉，失去了邊界半徑

矩形與圓角半徑旋轉

相關問題