如何转换简单的 CSS 框答案

【问题标题】：How to transform simple CSS box如何转换简单的 CSS 框
【发布时间】：2015-09-18 14:51:00
【问题描述】：

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

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

【问题讨论】：

谷歌上的 2 秒给了我这个例子 w3schools.com/cssref/tryit.asp?filename=trycss3_transform
这是你可以从 css3 初学者教程中获得的最基本的东西尝试在 w3schools w3schools.com/cssref/playit.asp?filename=playcss_transform_skew 中搜索 skew

标签： css css-shapes

【解决方案1】：

您可以使用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/

【讨论】：

我认为您还需要提及transform-origin。目前正在截屏。
更新了使用变换原点的答案。

【解决方案2】：

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

&lt;div class="box-wrapper"&gt;&lt;/div&gt;

【讨论】：