CSS 变换以将形状倾斜为梯形答案

【问题标题】：CSS Transform to skew the shape to a trapeziumCSS 变换以将形状倾斜为梯形
【发布时间】：2014-06-04 08:48:33
【问题描述】：

我希望能够以如下图显示的方式倾斜元素。

我一直在玩它，但似乎无法接近复制该形状。

我的css代码是

transform:skew(30deg,30deg);

transform 甚至是正确的方法吗？请告诉我最好的、最兼容浏览器的解决方案。

【问题讨论】：

它是填充形状还是轮廓形状？元素里面有内容吗？
这在 2d 变换中是不可能的……有一些技巧使用大边框来制作形状，但不可靠，特别是如果你想要里面的内容。如果您愿意，请查看css3shapes.com。
是的，元素中会有内容，很可能是背景图片

标签： css css-shapes css-transforms

【解决方案1】：

您可以围绕 X 轴应用一些旋转变换并在之前应用适当的pespective：

div {    
  width:300px;
  height:200px;
  background:url(http://placekitten.com/300/200);
  border:2px solid red;    
  border-top-width:4px;
  border-bottom-width:1px;
  -webkit-transform: perspective(200px) rotateX(40deg);    
  margin:100px;
}

Demo

【讨论】：

我还建议使用 X 旋转，这是一篇很好的文章，解释了旋转和透视：desandro.github.io/3dtransforms/docs/perspective.html。我会使用 rotateX、rotateY 和 rotateZ，因为它比 rotate3d 或 transform3d 更容易玩。
非常感谢朋友。该解决方案使我免于使用冗长的 js 来创建相同的效果。我多次使用rotateX，但只是为了放置旋转动画。你真是我的救命恩人。

【解决方案2】：

试试这个：

HTML

<div class="trapezium"></div>

样式表

.trapezium {
    border-bottom: 80px solid #fff;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    padding: 0 8px 0 0;
    height: 0;
    width: 120px;
    position: relative;
    margin: 2em auto;
}

.trapezium:before {
    border-bottom: 90px solid #000;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    padding: 0 8px 0 0;
    height: 0;
    width: 130px;
    position: absolute;
    bottom: -85px;
    left: -55px;
    content: "";
    z-index: -1;
}

这里是 Demo

【讨论】：

这实际上不是一个转换；它只是画了一个梯形。不过，它相当整洁，我不知道它是如何工作的......