css - 是否可以在不使用 CSS 变换的情况下倾斜 div 的边缘？

Question

假设我想制作一个像这样的斜边 div，

因为这个JS Bin或 this question证明，应该不难。然而，那两个使用 CSS 转换来实现这一目的。是否可以在没有 CSS 变换的情况下倾斜边缘？例如，在不使用 polyfill 的情况下支持 IE8 会很有用。

Answer 1

IE8 应该可以使用矩阵过滤器，所以 IE 应该使用后备转换:

.skew {
  display:table;
  margin:auto;
  transform:skew(0,5deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0.08748866352592415, M22=1, SizingMethod='auto expand')";
 
  overflow:hidden;
}
.skew div {
  margin-bottom:-40px;
  margin-top:30px;
  transform:skew(0,-5deg);
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=-0.08748866352592455, M22=1, SizingMethod='auto expand')";
  
}
img {
  display:block;
}

<div class="skew">
  <div>
    <img src="http://lorempixel.com/600/400" />
  </div>
</div>

注意，-ms-filter要在真实的IE8中进行测试，以提高测试效率。将此页面加载到正版 IE8 中以测试和运行代码段或从以下位置下载 zip 文件:http://codepen.io/gc-nomade/share/zip/LZpwwy/

一个有用的生成器:http://www.useragentman.com/IETransformsTranslator/