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

Question

Let's say I want to make a skewed-edge div like this one,

As this JS Bin or this question demonstrate, it shouldn't be difficult. However, those two use CSS transform to do the trick. Is it possible to skew the edge without CSS transform? It would be useful to support IE8 without using polyfills, for example.

Similar question here http://stackoverflow.com/questions/11241674/css-skew-transformation-in-ie-7-8 - no accepted answer, not duplicate — CalvT, Jun 08 '16 at 18:51
As a side note, if you don't find an answer, I think loosing the 'skew' is probably an acceptable fallback for a 7 year old browser :) — kthornbloom, Jun 08 '16 at 18:54
There is canvas, svg and the poorly supported clip path. Use transform. — damiano celent, Jun 08 '16 at 18:54
Alternatively you could achieve this effect by two divs, one at the bottom absolutely positioned with different border width on each side. — le_m, Jun 08 '16 at 18:59

score 2 · Accepted Answer · answered Jun 08 '16 at 19:34

IE8 is suppose to be able to use matrix filter , so transform with a fallback for IE should do :

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

Note, -ms-filter is to be tested in a real IE8 to make test efficient. Load this page into a genuine IE8 to test and run snippet or dowload the zip file from : http://codepen.io/gc-nomade/share/zip/LZpwwy/

a generator that can be helpfull : http://www.useragentman.com/IETransformsTranslator/

@deathlock no idea, but this filter was already avalaible for IE5, so i guess for machine running IE8, it is not a big deal unless you use it hundreds of times on a single page :) — G-Cyrillus, Jun 09 '16 at 17:59

score 0 · Answer 2 · answered Jun 08 '16 at 19:16

You can achieve this by creating a triangle using borders if you create an element with a very wide bottom border:

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

DEMO
http://codepen.io/Godwin/pen/PzPMBQ?editors=1100

However, like @kthornbloom said, unless you absolutely need to show a skew, it would be best practice to just let IE8 show a rectangle instead. You'll have more success making the page dependably responsive if you use transforms.

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

2 Answers2