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;
}