Question

这是我的开发页面：http://dev.kpixel.net/honeyprovidore/

以下是我正在处理的代码：http://codepen.io/web-tiki/pen/HhCyd

#categories li{
  position:relative;
  list-style-type:none;
  width:27.85714285714286%; /* = (100-2.5) / 3.5 */
  padding-bottom: 32.16760145166612%; /* =  width /0.866 */
  float:left;
  overflow:hidden;
  visibility:hidden;

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

我不明白原始人做六角形的大小。我需要做些什么来缩小它们？

Answer 1

我可能有点猜测，但确实可以扩展它。只需将27.8571％更改为您认为的大小，例如10％，然后将数学= 10（您的大小）/ 0.866，并将填充底部设置为11.5473％的结果。

这应该成功。

放置它们可能会有些麻烦！

Answer 2

我找到了原作者代码的更新版本，带有媒体查询，似乎效果更好。

@media (max-width: 600px) {
  #categories li{
    width:39.4%; /* = (100-1.5) / 2.5 */
    padding-bottom: 45.496%; /* =  width /0.866 */
  }

http://codepen.io/web-tiki/pen/azexKZ

我怎样才能让这些六边形更小？

2 个答案: