如何转换简单的CSS框

Question

我有一个简单的盒子。我需要像在图像中一样对其进行转换。有没有办法用CSS做到这一点？

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

Answer 1

.box-wrapper {
  background: black none repeat scroll 0 0;
  border: 3px solid #fff;
  height: 130px;
  transform: skew(0, 15deg);
  width: 397px;
  transform-origin: left center 0;
}

<div class="box-wrapper"></div>

Answer 2

您可以使用transform: skewY(20deg)执行此操作。您还应该考虑变换原点（计算变换的元素上的点）。在这种情况下，我将其设置为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/