如何有一个弯曲的div？ [复制]答案

【问题标题】：How to have a crooked div? [duplicate]如何有一个弯曲的div？ [复制]
【发布时间】：2015-04-23 13:45:52
【问题描述】：

如何有一个像this page中的红色div一样弯曲的div

这是我的 CSS：

#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
    background: red;
}

但我认为这是不正确的

【问题讨论】：

是什么让您认为它不正确？您能否提供一个工作示例来说明您的问题？
您能否具体说明什么是“不正确”？否则很难提供帮助......
这可能就是你要找的stackoverflow.com/questions/13591584/…
是skewY(20deg) 不是skew(20deg)

标签： html css

【解决方案1】：

我猜（并且提供的信息很差，这实际上只是一个猜测）它可能无法正常工作，因为您只使用了带有供应商前缀的转换版本。您使用的浏览器可能已经（并且仅）支持无前缀形式，因此您需要添加它：

-webkit 变换：倾斜（20 度）； -moz 变换：倾斜（20 度）； -o-变换：倾斜（20度）；变换：倾斜（20度）；

哦，如果您想复制您提供的示例的精确倾斜，仅沿 Y 轴，请使用 skewY() 而不是 skew() 和 10 度而不是 20 度：

-webkit-transform: skewY(10deg); -moz 变换：skewY（10 度）； -o-变换：倾斜Y（10度）；变换：倾斜Y（10度）；

【讨论】：

【解决方案2】：

经过快速检查，我发现 div 的转换属性如下：

transform: skewY(10deg);

这是一个让你开始的小提琴

http://jsfiddle.net/98c7e0mq/

【讨论】：