CSS Skew только контейнер, а не содержимое

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

введите здесь описание изображения

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

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

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


css transform skew
person briteweb    schedule 30.01.2013    source источник
comment
Если изображения принадлежат вам, не могли бы вы попросить дизайнера сделать это в формате PNG с прозрачным фоном (очевидно, обрезанным и перекошенным).   -  person    schedule 08.10.2014
comment
новее зависит от дизайнера... только не   -  person itd    schedule 22.11.2016

Ответы (2)


arrow_upward
13
arrow_downward

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

person AlienWebguy    schedule 30.01.2013
comment
Гений!!! Отлично работает во всех хороших браузерах. Теперь нужно найти решение для IE (8+). - person briteweb; 31.01.2013
comment
Большой! Но я сделал это без бэкфейса. работаю королем! Большое спасибо! - person aleXela; 01.02.2014

arrow_upward
1
arrow_downward

Вместо решения 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...).

РЕДАКТИРОВАНИЕ
Провел быстрый тест - похоже, вам нужно установить размеры холста - а также, очевидно, дождаться правильной загрузки всех изображений, прежде чем вы сможете скомпоновать их на холсте.

person niko    schedule 30.01.2013
comment
Спасибо за это решение. Я использовал холст в IE, так что это может быть решение, которое мне нужно для IE! - person briteweb; 31.01.2013