CSS实现一个背景的左下角像书一个有个小角折叠起来

可以使用 CSS 伪元素和 transform 属性来实现一个背景的左下角像书一个有个小角折叠起来的效果，具体步骤如下：

1. 创建一个父元素，设置其宽度、高度、背景颜色和边框颜色等样式属性。

2. 设置父元素的 position 为 relative，用于定位伪元素。

3. 创建一个子元素，设置其宽度和高度为 0，并设置其 border-top 和 border-right 的颜色。

4. 设置子元素的 position 为 absolute，并将其定位到父元素的左下角。

5. 使用 transform: rotate(-45deg) 将子元素旋转 45 度，实现折叠效果。

6. 使用 z-index 将子元素置于父元素下层，以便于看到折叠效果。

7. 创建一个伪元素，设置其宽度和高度，用于表示书的右半部分。

8. 设置伪元素的 position 为 absolute，并将其定位到父元素的右半部分。

9. 使用 border-radius 和 transform 属性将伪元素变为带有圆角的矩形，并将其旋转 90 度，实现书的效果。

下面是一个简单的例子：

<div class="container">
  <div class="fold"></div>
</div>

.container {
  width: 200px;
  height: 200px;
  background-color: #f0f;
  border: 1px solid #ccc;
  position: relative;
}

.fold {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-right: 20px solid #fff;
  position: absolute;
  bottom: -20px;
  left: 0;
  transform: rotate(-45deg);
  z-index: -1;
}

.container::after {
  content: "";
  width: 60px;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 10px 10px 0;
  transform: rotate(90deg);
}

这个例子实现了一个紫色的背景，左下角像书一个有个小角折叠起来的效果，右半部分是带有圆角的白色矩形。你可以根据实际需求修改大小、颜色等样式属性。