是否有可能在CSS3中形成这种形状？

Question

是否可以在CSS3中创建此形状？

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

谢谢..

Answer 1

把它放到你的css你的形状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作为您的要求。这段代码不适用于像旧的浏览器那样。

你可以在google网页设计软件的帮助下用你想要的多种形状制作你想要的形状

这里是链接：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 的解释。