如何用css来歪曲div

Question

我有div，我想知道如何稍微倾斜/倾斜底部和右侧。

我可以创建三角形，并倾斜所有边，只是不确定如何扭曲两边。

这可能吗？谢谢。

Answer 1

您可以使用:before和:after CSS选择器来完成此操作。我刚刚举起了一个粗略的例子。

的 JSFiddle

HTML：

<div class="slanted"></div>

CSS：

.slanted {
    position: relative;
    height: 200px;
    width: 380px;
    min-width: 380px;
    max-width: 380px;
    background: #000;
}

.slanted:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-right: 180px solid #000;
    border-top: 100px solid #000;
    border-bottom: 100px solid #fff; /* page background color */
}

.slanted:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-left: 200px solid #000;
    border-bottom: 200px solid #fff; /* page background color */
}

Answer 2

在较新的浏览器中，您可以使用CSS转换。

此代码会扭曲div：

-webkit-transform: matrix(1, 0, 0.6, 1, 250, 0);
-o-transform: matrix(1, 0, 0.6, 1, 250, 0);
transform: matrix(1, 0, 0.6, 1, 250, 0);

结果将如下所示：

JSFiddle

Mozilla开发者网络an article提供了有关您可以应用的不同转换的更多信息。它也有几个例子，并有details about browser compatibility。