Let’s say you have an HTML code as this one:
<section>
<img src="gfx/slider1.jpg" alt=""/>
<article class="container">
Lorem ipsum dolor sit amet...
</article>
</section>
and you skew it using CSS transforms (I’m using LESS):
section {
position: relative;
overflow: hidden;
height: 740px;
transform: skewY(-2.917deg);
> img, > article {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
> article {
transform: skewY(2.917deg);
}
}
It works nicely in all modern browsers, but of course Internet Explorer must give you a headache by presenting jagged, aliased edge:

To force it to antialias the edge, just apply this little fix:
section > img {
top: -1px;
}
and suddenly it looks like this:

Why? It seems IE antialiases only the transformed element’s edges, but does nothing for its contents. When image is moved beyond parent, skewed element — its antialiasing takes care of stuff.
If it has jagged edges in Chrome, Safari and other Webkit-based browsers, apply another fix:
section {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}