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

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

enter image description here

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

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

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

12
css skew transform

2 ответов

нужно настроить позиционирование и размер контейнера, чтобы вы могли обрезать его и применить 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

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

13

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

элемент canvas в 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);
}

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

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

редактировать
Сделал быстрый тест-похоже, вам нужно установить размеры холста - а также, очевидно, дождаться загрузки всех изображений должным образом, прежде чем вы сможете составить их на холсте.

1