六边形的边缘在镀铬中不光滑答案

【问题标题】：Edges of hexagons are not showing smooth in chrome六边形的边缘在镀铬中不光滑
【发布时间】：2015-07-13 20:18:14
【问题描述】：

我在 Chrome 中遇到了一个问题，我用HTML 和CSS 创建了一个六边形组。它在 Firefox 中显示良好，但在 chrome 中，六边形的边缘显示失真。我的代码如下

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

查看 jsfiddle https://jsfiddle.net/vinie23/2jsqmgw2/

请帮助我。您的帮助将不胜感激。提前致谢。

【问题讨论】：

标签： javascript jquery html css google-chrome

【解决方案1】：

要消除 Chrome 中 CSS 转换的锯齿状边缘，请添加 CSS 属性 -webkit-backface-visibility: hidden;。

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

【讨论】：

谢谢，但我也找到了这个解决方案。 :)

【解决方案2】：

试试这个：

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

您还可以使用一些向量来获得更清晰的线条和更少的代码，从而优化页面速度/加载。

编辑：解决方案在我之上：-webkit-backface-visibility: hidden;

【讨论】：