Css 带阴影的响应六边形网格

我已经看到了许多关于响应性六边形网格的可用资源，但这些都不能解决我的问题。我找到的所有网格的形状如下所示

但我希望六边形有这样的形状：

我已经尝试并取得了预期的效果，但问题是，通过响应式布局无法实现。而且我还不能应用阴影。我该怎么做

li.hex-row{
利润上限：-100px；
}
六角行：第n个子（2n）.六角{
变换：translateX（50%）旋转（120度）；
}
六边形容器{
保证金：0；
列表样式：无；
填充：0；
边缘顶部：100px；
}
.六边形{
宽度：400px；
背景：透明；
高度：200px；
显示：内联块；
变换：旋转（120度）；
溢出：隐藏；
可见性：隐藏；
边缘底部：10px；
}
六角行{
空白：nowrap；
}
.六角.内六角{
宽度：100%；
身高：100%；
背景：丽贝卡紫；
变换：旋转（-60度）；
溢出：隐藏；
}
.六边形{
宽度：100%；
身高：100%；
变换：旋转（-60度）；
能见度：可见；
盒影：1px 0px 0px 0px；
背景色：#310073；
}
.六边形.六边形内模：后{
位置：绝对位置；
宽度：100%；
内容：''；
z指数：1；
身高：100%；
背景图片：url(http://www.w3schools.com/cssref/img_flwr.gif);
背景位置：中心；
背景重复：无重复；
}
.十六进制图像隐藏{
可见性：隐藏；
}

您只需将尺寸更改为vw即可使其响应

关于阴影，在现代浏览器中，可以使用过滤器放置阴影：

li.hex-row{
利润上限：-10vw；
}
六角行：第n个子（2n）.六角{
变换：translateX（50%）旋转（120度）；
}
六边形容器{
保证金：0；
列表样式：无；
填充：0；
利润率最高：10vw；
}
.六边形{
宽度：18vw；
背景：透明；
高度：9vw；
显示：内联块；
变换：旋转（120度）；
溢出：隐藏；
可见性：隐藏；
利润底部：7vw；
位置：相对位置；
}
六角行{
空白：nowrap；
滤镜：水滴影（0.5vw 2vw 0.5vw黑色）；
}
.六角.内六角{
宽度：100%；
身高：100%；
背景：丽贝卡紫；
变换：旋转（-60度）；
溢出：隐藏；
位置：相对位置；
}
.六边形{
宽度：100%；
身高：100%；
变换：旋转（-60度）；
能见度：可见；
盒影：1px 0px 0px 0px；
背景色：#310073；
}
.六边形.六边形内模：后{
位置：绝对位置；
宽度：100%；
内容：''；
z指数：1；
身高：100%；
背景图片：url(http://www.w3schools.com/cssref/img_flwr.gif);
背景位置：中心；
背景重复：无重复；
}
.十六进制图像隐藏{
可见性：隐藏；
}