CSS双叠加层倾斜效果求助：复刻目标样式遇问题

嘿，我把你正在调试的不对称背景样式代码整理成了更易读的Markdown格式，方便你查看和调整：

.asymmetric {
  position: relative;
  background-color: #7CCBF2;
}

.asymmetric::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 115%;
  top: -30px;
  left: 0;
  background-color: red;
  transform: skewY(-3deg);
  z-index: -10;
}

.asymmetric::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 115%;
  top: -10px;
  left: 0;
  background-color: yellow;
  transform: skewY(3deg);
  z-index: -10;
}

body {
  margin: /* 你的代码在这里截断了，可以补充完整的margin值 */
}

要是你后续需要微调倾斜角度、层叠层级或者背景色，直接修改对应的属性值就行～

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