是否可以在 CSS3 中制作这种形状？

Question

是否可以在 CSS3 中制作这种形状？

我看到了这个链接http://css-tricks.com/examples/ShapesOfCSS/，我不知道这个页面中的任何形状是否可以编辑成我需要的形状。

谢谢你..

Answer 1

把这个放到你的css你的shape div中

 -webkit-transform: rotatey(16deg);
 -moz-transform: rotatey(16deg);
 transform: rotatey(16deg); 
 position: absolute;  

将此代码放入您的形状 div 的父 div

-webkit-perspective: 175;
-moz-perspective: 175;
perspective: 175;
position: relative;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;

此代码可以制作您想要的形状，并根据您的要求设置高度宽度和其他 css。此代码不适用于像 ie 这样的旧浏览器。

在谷歌网页设计软件的帮助下，您可以使用和 css 制作多种形状

这里是链接：https://www.google.com/webdesigner/

Answer 2

FIDDLE

这是我的方法：

div {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;

    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
    -webkit-backface-visibility: hidden;

    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
}
div:after {
    content: "";
    display: block;
    position: absolute;
    border-style: solid;
    border-color: #FFF transparent transparent;
    border-width: 127px 0 25px 19px;
    right: 0;
}
div:before {
    background: rgba(255, 0, 0, 0.45);
    width: 668px;
    height: 240px;
    content: "";
    display: block;

    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;

    -webkit-transform: rotate(-9.5deg) skewX(1deg);
    -moz-transform: rotate(-9.5deg) skewX(1deg);
    -ms-transform: rotate(-9.5deg) skewX(1deg);
    -o-transform: rotate(-9.5deg) skewX(1deg);
    transform: rotate(-9.5deg) skewX(1deg);
}

我想，jingesh kheni 的解决方案可能更干净，但我试过了，不知何故 perspective 属性对我不起作用。

编辑：
根据OP关于div粗糙边缘的评论，我更新了小提琴和上面的代码。我只是添加了这行 CSS：

-webkit-backface-visibility: hidden;

这些粗糙的边缘是 Chrome 中的一个错误，here's 解释。