是否可以在不使用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/

Answer 2

如果您创建一个具有非常宽的底部边框的元素，则可以通过使用边框创建三角形来实现此目的：

HTML

<div id="container">
  <div id="mask">
  </div>
</div>

CSS

#container {
  position: relative;
  width: 100%;
  height: 25em;
  overflow: hidden;
  ...
}

#mask {
  /* position the element on top */
  position: absolute;
  width: 0;
  height: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  /* create a triangle using borders */
  border-style: solid;
  border-color: YOUR_BACKGROUND_COLOUR transparent;
  /* A fallback for browsers that don't support vw */
  border-width: 0 2560px 5em 0;
  /* make the border take the full width of the screen: http://caniuse.com/#feat=viewport-units */
  border-width: 0 100vw 10em 0;
}

<强>样本
http://codepen.io/Godwin/pen/PzPMBQ?editors=1100

然而，就像@kthornbloom所说，除非你绝对需要显示偏斜，否则最好让IE8显示一个矩形。如果您使用转换，您将获得更多成功，使页面可靠地响应。