Скос одного угла изображения

Я пытаюсь исказить один угол фона div, как показано на зеленой галочке на изображении ниже:

enter image description here

В CSS3 я, однако, не могу этого добиться, перекос полностью перекошен в каждом углу. Я просто хочу перекосить нижний правый угол влево (скажем, 25 пикселей) и сохранить перспективу (как показано на рисунке выше).

 background-image: url('http://rtjansen.nl/images/stackoverflow.png');
-webkit-transform: skew(-45deg);

Fiddle: http://jsfiddle.net/3eX5j/

Мой код:

div {    
    width: 300px;
    height:80px;
    margin-left:40px;
    background-image: url('http://rtjansen.nl/images/stackoverflow.png');
    -webkit-transform: skew(-45deg);
}

Ответы

Ответ 1

Все, что вам нужно сделать, это подумать в 3d:

div {    
    width: 300px;
    height:80px;
    margin-left:40px;
    background-image: url('http://rtjansen.nl/images/stackoverflow.png');
    -webkit-transform: perspective(100px) rotateX(-25deg);
    -webkit-transform-origin: left center;
    -moz-transform: perspective(100px) rotateX(-25deg);
    -moz-transform-origin: left center;
}

fiddle

Объяснение: вы вращаете элемент по направлению к себе в верхней части. Но, перспектива (обработанная, хотя происхождение преобразования, это функция!) Делает вращение левой руки не переводимым в горизонтальное движение.

Посмотрите, как можно контролировать конечный размер

скрипка с несколькими вариантами