如何为带前置SVG六边形网格的各区块设置独立背景色并调整位置

我尝试为每个独立section/div区块设置不同背景色，页面顶层铺有带透明间隙的六边形网格SVG图案。当前效果可参考图示，我需要将红色背景向上推移至蓝线标注位置，此前尝试调整padding和margin属性均未生效。
图示说明

现有代码存在4个核心问题导致样式调整无效：

• CSS规范明确规定padding属性不支持负值，你写的padding: -20px;属于无效规则，不会被浏览器解析
• 作为背景层的::before伪元素没有设置基础宽高，默认尺寸为0，调整margin自然看不到视觉变化
• 父元素.backgroundable设置了overflow: hidden，就算伪元素向上偏移，超出父元素范围的部分也会被直接裁切
• 代码末尾多了一个多余的闭合大括号}，会导致后续新增的样式全部失效
• 父元素未创建层叠上下文，z-index: -1的伪元素容易跑到body背景下方，出现背景显示异常

CSS代码 #

body {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' viewBox='0 0 5044 2922'%3E%3Cpath fill='slategrey' d='M -780 110 L 780 110 L 1560 1461 L 780 2812 L -780 2812 L -780 110 M 1742 -1351 L 3302 -1351 L 4082 0 L 3302 1351 L 1742 1351 L 962 0 L 1742 -1351 M 1742 1571 L 3302 1571 L 4082 2922 L 3302 4273 L 1742 4273 L 962 2922 L 1742 1571 M 4264 110 L 5824 110 L 5824 2812 L 4264 2812 L 3484 1461 L 4264 110 Z'/%3E%3C/svg%3E") repeat;
  margin: 0;
}

.backgroundable {
  display: grid;
  grid-template-areas: "cell";
  overflow: visible;
  position: relative;
  z-index: 0;
}

.backgroundable::before {
  grid-area: cell;
  display: block;
  content: '';
  z-index: -1;
  width: 100%;
  height: 100%;
}

.a::before {
  background: khaki;
}

.b::before {
  background: red;
  transform: translateY(-40px);
  height: calc(100% + 40px);
}

.backgroundable-wrapper {
  position: relative;
  grid-area: cell;
  padding: 1em;
}

HTML代码（无需修改） #

<div class="backgroundable a">
 <div class="backgroundable-wrapper">content!<br><br><br><br><br><br><br><br><br></div>
</div>

<div class="backgroundable b">
  <div class="backgroundable-wrapper">more content!<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
</div>

<div class="backgroundable c">
  <div class="backgroundable-wrapper">more content!<br><br><br><br><br><br><br><br><br><br><br><br></div>
</div>

• 如果需要修改红色背景向上延伸的距离，同步修改translateY()的偏移值和calc()里的加值即可，两个数值保持一致
• 如果不需要背景跨区块延伸，把.backgroundable的overflow: visible改回overflow: hidden即可
• 盒模型属性中只有margin支持负值，padding、border等属性均不支持负值设置

内容的提问来源于stack exchange，提问作者Anto