左上角朝上弯曲，右上角朝下弯曲，整体div平行并不旋转，如何实现

要实现左上角朝上弯曲，右上角朝下弯曲，整体 div 平行不旋转的效果，可以使用 `::before` 伪元素和 `::after` 伪元素来模拟左上角和右上角的形状。具体实现步骤如下：

1. 首先，将 div 元素的 `border-radius` 属性设置为 0，将其四个角都变成直角。

2. 然后，使用 `::before` 伪元素和 `::after` 伪元素分别模拟左上角和右上角的形状。具体来说，可以将 `::before` 伪元素设置为一个倾斜的矩形，再使用 `border-radius` 属性设置左上角的圆角程度。同样地，将 `::after` 伪元素设置为一个倾斜的矩形，再使用 `border-radius` 属性设置右上角的圆角程度。例如：

div {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #ccc;
  border-radius: 0;
}

div::before,
div::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #ccc;
}

div::before {
  left: 0;
  transform: skew(-20deg);
  transform-origin: top right;
  border-top-left-radius: 20px;
}

div::after {
  right: 0;
  transform: skew(20deg);
  transform-origin: top left;
  border-top-right-radius: 20px;
}

上述代码中，`::before` 伪元素和 `::after` 伪元素都被设置为绝对定位，宽度为 div 元素的一半，高度为 div 元素的高度。`::before` 伪元素使用 `transform: skew(-20deg)` 将其倾斜并向左上角倾斜，使用 `transform-origin: top right` 设置其变换的原点为右上角，再使用 `border-top-left-radius` 属性设置左上角的圆角程度。`::after` 伪元素同理，使用 `transform: skew(20deg)` 将其倾斜并向右上角倾斜，使用 `transform-origin: top left` 设置其变换的原点为左上角，再使用 `border-top-right-radius` 属性设置右上角的圆角程度。

这样就可以实现左上角朝上弯曲，右上角朝下弯曲，整体 div 平行不旋转的效果了。