如何在六边形之间添加更多填充而不丢失响应性？

Question

我在一个个人网站上工作，我想在首页上显示六角形图像/平铺。我在这里找到了响应式六边形html和css块的解决方案。现在，我想在这些六边形之间添加更多填充，而又不失去响应性。

我尝试添加填充，但会破坏整体响应能力。

这是我发现的here原始代码。

我想要在两个六边形之间增加填充，例如15px或20px的填充。

Answer 1

我找不到以像素为单位进行填充的方法，但这是对我有用的方法，

.hexIn {
    width:86%;
    padding-bottom: 99.307%; /* =  width / sin(60) */
}

减小hexIn块的宽度值，并相应地减小填充。您可以直观地分析块之间的填充，尝试减小/增大，直到填充舒适为止。

padding-bottom =（宽度* 2）/1.7320