css - 六边形图案不适用于 ems？

Question

所以我在这里尝试了解六边形的工作原理。我目前保存了一个代码笔，如下所示:

http://codepen.io/anon/pen/QweBra

修改自 webtiki codepen

#categories li{
  position:relative;
  list-style-type:none;
  width:27.8em; 
  padding-bottom: 32.1em;
  float:left;
  overflow:hidden;
  visibility:hidden;

  -webkit-transform: rotate(-60deg) skewY(30deg);
  -ms-transform: rotate(-60deg) skewY(30deg);
  transform: rotate(-60deg) skewY(30deg);
}
#categories li:nth-child(3n+2){
  margin:0 1em;
}
#categories li:nth-child(6n+4){
  margin-left:0.5em;
}
#categories li:nth-child(6n+4), #categories li:nth-child(6n+5), #categories li:nth-child(6n+6) {
    margin-top: -6.9em;
  margin-bottom: -6.9em;

  -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
  -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
  transform: translateX(50%) rotate(-60deg) skewY(30deg);
}

#categories li *{
  position:absolute;
  visibility:visible;
}
#categories li > div{
  width:100%;
  height:100%;
  text-align:center;
  color:#fff;
  overflow:hidden;

  -webkit-transform: skewY(-30deg) rotate(60deg);
  -ms-transform: skewY(-30deg) rotate(60deg);
  transform: skewY(-30deg) rotate(60deg);

    -webkit-backface-visibility:hidden;

}

如您所见，我不了解定位背后的潜在魔力。尽管我的 em 值相同，但没有成功。与原来的代码笔相比，六边形被替换了。

这是什么原因？

好的，快到那里了:

http://codepen.io/anon/pen/QweBra

Answer 1

你的宽度太宽了。

#categories{
  overflow:hidden;
  width:80%;font-size:0.4em;
  margin:0 auto;
}

更改为:

#categories{
  overflow:hidden;
  width:50%;font-size:0.4em;
  margin:0 auto;
}

你也可以把所有东西都放在一个容器里，这样它就不会溢出。