创建倾斜响应式背景

.container {
  position: relative;
  overflow: hidden;
  background-color: #f1f1f1;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff0000;
  transform: skewY(-5deg);
  transform-origin: top left;
}

.content {
  position: relative;
  z-index: 1;
  padding: 20px;
}

@media (max-width: 768px) {
  .background {
    transform: skewY(0);
  }
}