css画平行四边形带圆角

要使用CSS创建一个有圆角的平行四边形，你可以通过设置`border-radius`属性和一些基本的宽度、高度以及定位来实现。这里是一个简单的示例：

.parallelogram {
  width: 150px; /* 平行四边形宽度 */
  height: 75px;  /* 平行四边形高度 */
  background-color: #f00; /* 颜色随意选择 */
  position: relative;
}

.parallelogram::before {
  content: "";
  position: absolute;
  top: -37.5px; /* 圆角半径的一半减去高度的一半，保持对齐 */
  left: 50%;
  transform: translateX(-50%) rotate(45deg); /* 旋转45度 */
  width: 0;
  border-right: 75px solid transparent; /* 左边矩形宽度 */
  border-bottom: 75px solid red; /* 底部矩形颜色 */
  border-top: 75px solid transparent; /* 上方矩形透明 */
  border-radius: 37.5px 0 0 37.5px; /* 两个圆角值分别对应四个角落 */
}

.parallelogram::after {
  content: "";
  position: absolute;
  bottom: -37.5px; /* 圆角半径的一半减去高度的一半，保持对齐 */
  left: 50%;
  transform: translateX(-50%) rotate(-45deg); /* 反向旋转45度 */
  width: 0;
  border-left: 75px solid transparent; /* 右边矩形宽度 */
  border-top: 75px solid red; /* 顶部矩形颜色 */
  border-bottom: 75px solid transparent; /* 下方矩形透明 */
  border-radius: 0 37.5px 37.5px 0; /* 另两个圆角值 */
}

在这个例子中，`.parallelogram::before` 和 `.parallelogram::after` 创建了两个三角形，它们合并在一起形成了一个带圆角的平行四边形。