具有不同值顶部和底部的 SkewY [重复]答案

【问题标题】：SkewY with different values top and bottom [duplicate]具有不同值顶部和底部的 SkewY [重复]
【发布时间】：2013-05-22 21:59:48
【问题描述】：

我想制作一个顶部倾斜 -10 度，底部倾斜 10 度的形状，以产生如图所示的形状：

我似乎无法弄清楚如何做到这一点。

【问题讨论】：

标签： css transform css-shapes skew

【解决方案1】：

Working Demo

这应该可以解决问题：

CSS

#test {
    width: 200px;
    height: 200px;
    -webkit-transition: all 300ms ease-in;
     background: black;
    position: relative;
}

#test:after, #test:before {
    display: block;
    content: "";
    color: transparent;
    width: 215px;
    height: 50px;
    background: white;
    position: absolute;
    left: -10px;
    bottom: -20px;
    -webkit-transform: rotate(12deg);
    -moz-transform: rotate(12deg);
}
#test:before {
    bottom: auto;
    top: -20px;
    -webkit-transform: rotate(-12deg);
    -moz-transform: rotate(-12deg);
}

HTML

<div id="test"></div>

【讨论】：

经过审查，似乎 CSS Perspective + Rotate 可以很好地工作。但我似乎无法让内容不失真。 jsfiddle.net/cyarema/G9bXT/3
@ChristiYarema，你想要这个jsfiddle.net/G9bXT/4 吗？
Gurpreet....非常接近。谢谢。您认为内容可以包含在红框中吗？我尝试了一个隐藏的溢出...没有用。这些人希望图像和文本被红色形状截断，而不仅仅是在它上面。
很难理解你到底想要什么。如果您可以上传所需的结果，我可能会提供帮助。
[link]partyplanetxtreme.com/blog/wp-content/uploads/2013/05/ppx.png 这是我想要达到的效果，而无需使用图形。感谢您的帮助。