我有一个问题出现在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;
}
见请帮助我。您的帮助将不胜感激。提前致谢。
谢谢,但我也发现这个解决方案。 :) – Vinie