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

Question

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

正如这个 JS Bin or this question 所展示的那样，这应该不难。然而，这两个使用 CSS 变换来完成这个技巧。是否可以在没有 CSS 变换的情况下倾斜边缘？例如，在不使用 polyfill 的情况下支持 IE8 会很有用。

Answer 1

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

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 显示一个矩形。如果您使用转换，您将更成功地使页面响应可靠。

Answer 2

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/

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

Is it possible to skew the edge of a div without using CSS transform?

css

css-transforms