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 trans­forms (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 nice­ly in all modern brow­sers, but of cour­se Inter­net Explo­rer must give you a heada­che by pre­sen­ting jag­ged, alia­sed edge:

To for­ce it to antia­lias the edge, just apply this lit­tle fix:

section > img {
    top: -1px;
}

and sud­den­ly it looks like this:

Why? It seems IE antia­lia­ses only the trans­for­med ele­men­t’s edges, but does nothing for its con­tents. When ima­ge is moved bey­ond parent, ske­wed ele­ment — its antia­lia­sing takes care of stuff.

If it has jag­ged edges in Chro­me, Safa­ri and other Webkit-based brow­sers, apply ano­ther fix:

section {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}