CSS Скос только контейнер, а не контент

Мне трудно понять, как сделать следующий макет работы. Я не ограничен чистым CSS - я знаю, что JS будет задействован, чтобы сделать его кросс-браузерным, но решение для CSS было бы потрясающим. Вот чего я пытаюсь достичь:

Я пробовал следующий код, перекосил контейнер и затем исказил изображение в противоположном направлении, но он просто дает мне квадратное изображение. Инспектор Chrome показывает мне, что контейнер перекошен правильно, но перекос назад назад снова делает его квадратным. Добавление переполнения: скрытый для контейнера вид работ, но края угла становятся зубчатыми. Вот что я пробовал:

http://codepen.io/anon/pen/ubrFz

Пожалуйста, помогите!:)

Ответ 1

Необходимо настроить расположение и размер контейнера, чтобы вы могли обрезать его, и примените правило backface-visibility:

.skew {
    -webkit-backface-visibility : hidden; /* the magic ingredient */
    -webkit-transform           : skew(16deg, 0);
    overflow                    : hidden;
    width                       : 300px;
    height                      : 260px;
    position                    : relative;
    left                        : 50px;
    border                      : 1px solid #666
}

.skew img {
    -webkit-transform : skew(-16deg, 0);
    position          : relative;
    left              : -40px;
}

http://codepen.io/anon/pen/HLtlG < - before (aliased)

http://codepen.io/anon/pen/wnlpt < - после (сглаживание)

Ответ 2

Вместо решения CSS вы также можете добиться эффекта, используя холст и некоторые JS; и составление серии обрезанных изображений на этом холсте. Преимущество метода холста заключается в том, что вы потенциально получите более гладкие края на культурах, и это потенциально немного лучше поддерживается.

Элемент холста в HTML;

<canvas id="mycanvas"></canvas>

И JS;

var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
img1.src = '../my/image1.jpg';
img2.src = '../my/image2.jpg';
img3.src = '../my/image3.jpg';

var can = document.getElementById("mycanvas");
var ctx = can.getContext('2d');

var imgs = [img1, img2, img3]; //array of JS image objects that you've set up earlier

can.width = 1000;
can.height = 100;

for (var i=0; i < imgs.length; i++) {
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(800 - (200 * i), 0);
    ctx.lineTo(900 - (200 * i), 100); 
    ctx.lineTo(0, 100);
    ctx.closePath();
    ctx.clip();

    ctx.drawImage(imgs[i], 0, 0);
}

Код просто у меня на голове - я его не тестировал. Но в принципе - скажем, у вас есть холст, максимальный размер которого составляет 1000 пикселей и высотой 100 пикселей. Что происходит выше, вы создаете область отсечения с диагональной линией поперек холста от точки (800,0) до (900,100), а затем рисуете изображение в эту область отсечения... Затем настройте новый обтравочный контур 200 пикселей короче для каждого изображения (обратите внимание на бит "200 * i" ). Очевидно, что математика должна быть скорректирована для произвольного количества изображений и т.д. Но идея есть.

Немного сложнее, чем чистый CSS, возможно, но, как я уже сказал, возможно, немного лучше поддерживается кросс-браузер (IE несмотря на...).

ИЗМЕНИТЬ
Был ли быстрый тест - похоже, вам нужно установить размеры холста, а также, очевидно, ждать, пока все изображения будут загружены правильно, прежде чем вы сможете их комбинировать на холсте.