java做梯形形状,CSS变形将形状扭曲为梯形

I want to be able to skew an element in the way the image displays below.

I have been playing around with it, but dont seem to be able to get close to replicating that shape.

My css code is

transform:skew(30deg,30deg);

Is transform even the right way to do this? Please let me know the best, most browser compatible, solution.

解决方案

You can apply some rotate transform around the X axis and apply an appropriate pespective before:

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;

}