Как создать плавное трапециевидное изображение с помощью css?

Обновленный ответ (чистый CSS3)

Экстремальные требования иногда требуют экстремальных решений. Я опирался на свой первоначальный ответ (ниже), чтобы создать чистое решение css, которое работает (и может работать лучше, если вы хотите инвестировать в это время). текущий пример немного "прерывистый" при рендеринге, что может быть для вас нормально, но если нет, вам нужно будет расширить и без того непристойное количество @media запросов, которые его вызывают (это вероятно, будет намного проще реализовать с помощью LESS или SASS; я составил электронную таблицу Excel на основе формул, чтобы быстро генерировать числа). Он использует этот код:

HTML

<div class="box">
   <img src="yourImage.jpg" />
</div> 

CSS

.box{
    height:300px;  
    min-width: 100px; /*could be different, but you ought to have some min*/
    overflow:hidden;
}

.box img {
    height: 100%;
    width: 100%;   
    -ms-transform-origin: 100% 100%; /* IE 9 */
    -webkit-transform-origin: 100% 100%; /* Safari and Chrome */
    -moz-transform-origin: 100% 100%; /* Firefox */
    -o-transform-origin: 100% 100%; /* Opera */
    transform-origin: 100% 100%;
}

/*Sample... you need alot of these--my fiddle example has 51*/
@media screen and (min-width:  100px) { 
  .box { 
    -ms-transform:skewY(45deg); 
    -moz-transform:skewY(45deg); 
    -webkit-transform:skewY(45deg); 
    -o-transform:skewY(45deg); 
    transform:skewY(45deg); 
  } 
  .box img { 
    -ms-transform:skewY(-90deg); 
    -moz-transform:skewY(-90deg); 
    -webkit-transform:skewY(-90deg); 
    -o-transform:skewY(-90deg); 
    transform:skewY(-90deg);
  }
}

Вот как рассчитать градусы

Предположим, что height: 300px с узкой стороной примерно 100px высотой и равными углами трапеции. Это означает, что верхнее и нижнее смещение равно (300px - 100px) / 2 = 100px. Затем .box углов отсчитываются от @media запросов min-width сумм по следующей формуле:

Angle = arctan(100/min-width) /*100 is the upper/lower offset as above*/

Для угла .box img возьмите Angle и умножьте на -2. Таким образом, ваши медиа-запросы и преобразования .box и .box img будут иметь следующий псевдокод:

@media screen and (min-width: [your target min-width]) { 
  .box {transform: skewY(Angle)}
  .box img {transform: skewY(-2*Angle)}
}

Насколько плавно это работает, полностью зависит от того, в каком микромасштабе вы вносите изменения в min-width, чтобы получить новую настройку угла. Как я уже говорил в своем комментарии к коду CSS выше, в моем примере используется 51 вызов медиа-запроса, и в нем все еще есть некоторая изменчивость.

Не лучше ли вместо этого использовать какое-нибудь решение на основе javascript... возможно, но это полностью зависит от дизайнера, поэтому я предлагаю это здесь просто как доказательство того, что его можно заставить работать с чистым css.