css平行四边形

作者：半世苍凉发布日期:2025-04-25 浏览:52

/* 使用 CSS 创建一个平行四边形 */

.parallelogram {
  width: 150px;
  height: 100px;
  background: #3498db;
  transform: skew(20deg); /* 通过 skew 变换创建倾斜效果，形成平行四边形 */
}

/* 如果需要在平行四边形内放置内容，可以使用以下代码 */
.parallelogram-content {
  transform: skew(-20deg); /* 反向倾斜内容，使其保持正常显示 */
  padding: 20px;
}

解释说明：

transform: skew(20deg);：通过 skew 变换使元素倾斜，角度为 20 度，从而形成平行四边形的效果。
transform: skew(-20deg);：如果平行四边形内有文字或其他内容，可以通过反向倾斜（-20 度）来确保内容保持正常显示。

上一篇：css left

下一篇：css 折行