六邊形的邊緣在鉻中不顯示平滑

我有一個問題出現在Chrome中，我創建了一個帶有HTML和CSS的六角形組。它在Firefox中顯示效果很好，但是在六邊形的邊緣顯示扭曲。我的代碼是對的jsfiddle https://jsfiddle.net/vinie23/2jsqmgw2/六邊形的邊緣在鉻中不顯示平滑

以下

HTML

<div class="col-sm-12 margin-left-100" id="sortable"> 
    <div id="c_1" class="hexagon hexagon2 sort"> 
    <div class="hexagon-in1"> 
     <div class="hexagon-in2"> 
      <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div> 
     </div> 
    </div> 
</div> 
<div id="c_2" class="hexagon hexagon2 sort"> 
    <div class="hexagon-in1"> 
     <div class="hexagon-in2"> 
      <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div> 
     </div> 
    </div> 
</div> 
</div>

CSS

.hexagon { 
    overflow: hidden; 
    visibility: hidden; 
    -webkit-transform: rotate(120deg); 
    -moz-transform: rotate(120deg); 
    -ms-transform: rotate(120deg); 
    -o-transform: rotate(120deg); 
    transform: rotate(120deg); 
    cursor: pointer; 
    } 
.hexagon-in1 { 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
    -webkit-transform: rotate(-60deg); 
    -moz-transform: rotate(-60deg); 
    -ms-transform: rotate(-60deg); 
    -o-transform: rotate(-60deg); 
    transform: rotate(-60deg); 
    } 
.hexagon-in2 { 
    width: 100%; 
    height: 100%; 
    background-repeat: no-repeat; 
    background-position: 50%; 
    visibility: visible; 
    -webkit-transform: rotate(-60deg); 
    -moz-transform: rotate(-60deg); 
    -ms-transform: rotate(-60deg); 
    -o-transform: rotate(-60deg); 
    transform: rotate(-60deg); 
    } 
.hexagon-in2{ 
    background: #6B6A6A; 
    } 

.hexagon1 { 
    width: 200px; 
    height: 100px; 
    margin: 0 0 0 -80px; 
    } 
.hexagon2 { 
    float: left; 
    width: 80px; 
    height: 117px; 
    margin: -20px 0 0 20px; 
    } 
.inner{position: relative;color: #FFF; display: none; padding-top: 6px; background: #009999;width: 50px;width: 34px;height: 32px;border-radius: 25px;} 
div#sortable .hexagon:nth-child(5) { 
    margin-left: 5px; 
} 
div#sortable .hexagon:nth-child(10) { 
    margin-left: 50px; 
} 
div#sortable .hexagon:nth-child(14) { 
    margin-left: 100px; 
}

見請幫助我。您的幫助將不勝感激。提前致謝。

來源

2015-07-13 Vinie

爲了擺脫Chrome中CSS轉換的鋸齒邊緣，需要添加CSS屬性-webkit-backface-visibility: hidden;。

小提琴：https://jsfiddle.net/2jsqmgw2/11/

來源

2015-07-13 12:10:21

謝謝，但我也發現這個解決方案。 :) – Vinie

試試這個：

.hexagon-in2{ 
background: #6B6A6A; 
-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 
}

你也可以使用一些載體來獲得清晰的線條和更少的代碼，從而優化網頁速度/負載。

編輯：解決方案是在我上面：-webkit-backface-visibility: hidden;

來源

2015-07-13 12:13:27 Lansana

六邊形的邊緣在鉻中不顯示平滑

回答

相關問題