How to transform simple CSS box

Question

I have a simple box. I need to transform it like in the image. Is there a way to do it with CSS?

.box-wrapper{
    border: 3px solid #fff;
    width: 397px;
    height: 130px;
}

Answer 1

You can use transform: skewY(20deg) to do this. You should also consider the transform origin (the point on the element from where the transformation is calculated). In this case I have set it be transform-origin: top left;

.box-wrapper{
  border: 3px solid #fff;
  width: 397px;
  height: 130px;
  background: #000;
  transform: skewY(20deg); 
  transform-origin: top left;   
}

http://jsfiddle.net/daynsxLt/3/