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

Ответ 1

Обновленный ответ (чистый 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.

Оригинальный ответ

Это, по-видимому, достигает ширины жидкости. Я не знаю, сколько контроля вы хотите от того, сколько или какой части изображение отображается, поэтому оно может не соответствовать вашим потребностям, но оно делает гибкое изображение ширины с помощью преобразований, чтобы придать ему фальшивый вид перспективы.

Ответ 2

С клипом SVG

Вы можете достичь этой формы с помощью встроенного SVG и элемент clipPath:

<svg viewbox="0 0 10 6.7">
  <defs>
    <clipPath id="clip">
      <polygon points="10 0, 10 6.7, 0 4.7, 0 2" />
    </clipPath>
  </defs>
  <image xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#clip)"/>
</svg>

Ответ 3

Если вы немного играете с pseudoelements и 2DTransforms (поддерживаемым с Firefox 3.5), вы можете добиться этого эффекта: http://jsfiddle.net/fcalderan/T5KPA/1/

Я пробовал Chrome и Firefox. Для Opera и IE9 вам необходимо добавить проприетарные префиксы.

Разметка действительно важна:

<figure class="triangle">
    <img src="http://cssglobe.com/lab/angled/img.jpg">
</figure>

и css для получения этого эффекта:

img { display: block; }

.triangle { 
   position   : relative; 
   overflow   : hidden; 
   padding    : 0; margin: 0; 
   display    : inline-block; 
}

.triangle:after,
.triangle:before {
   content    : "";
   position   : absolute;
   z-index    : 2;
   left       : -50%;
   width      : 200%;
   height     : 40%;
   display    : block;
   background : #fff;   
}

.triangle:before {
    top: -24%;  
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

.triangle:after {
    bottom: -24%;  
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    transform: rotate(10deg);
}

Я покрасил вращающиеся псевдоэлементы с помощью белого цвета, но, конечно, вы можете изменить цвет, чтобы он соответствовал реальному цвету фона