css 平行四边形

作者：步崖发布日期:2025-05-20 浏览:106

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

/* 如果需要内容保持不倾斜，可以嵌套一个子元素并反向旋转 */
.parallelogram span {
    display: inline-block;
    transform: skew(-20deg); /* 反向旋转，使内容保持垂直 */
    margin-left: 20px; /* 调整内容的位置 */
}

解释说明：

.parallelogram 类定义了一个矩形，并通过 transform: skew(20deg) 将其倾斜成平行四边形。
如果你在平行四边形内有文本或其他内容，它们也会随着容器一起倾斜。为了避免这种情况，可以在平行四边形内部嵌套一个 span 元素，并使用相反的 skew 角度（即 -20deg）来抵消倾斜效果，从而使内容保持垂直。

上一篇：css 渐变边框

下一篇：css文本不换行