可以使用伪元素 ::before 或 ::after 来代替背景色设置，避免超出父元素限制。示例代码如下：

HTML：

CSS：

.parent {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  /* 超出父元素限制的背景色 */
  background-color: #f00;
}

/* 使用 ::before 代替设置背景色 */
.child::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: #f00;
  transform: rotate(45deg);
  z-index: -1;
}