Как создать жидкое трапециевидное изображение с помощью CSS? - PullRequest
Новая
       23

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

17 голосов
/ 27 марта 2012

Я работаю над сайтом, на котором мы используем эффект параллакса.В этом есть некоторые изображения в форме треугольника, такие как enter image description here

, и изображение прозрачное, потому что оно перекрывает вышеуказанный DIV.Я пытаюсь так много вещей с помощью CSS.но не получил желаемого результата.Я достигаю желаемого результата с фиксированной шириной.Отметьте это http://jsfiddle.net/eJ7Sf/2/, но оно не работает с шириной жидкости.Проверьте, что я все еще пытаюсь, но не работает

http://jsfiddle.net/ceGGN/3/

http://jsfiddle.net/eJ7Sf/1/

ПРИМЕЧАНИЕ: я знаю о css3 MASK свойство, но оно не работает в предыдущих браузерах Firefox.Я хочу возможность до firefox 3.6.13

Ответы [ 3 ]

8 голосов
/ 01 апреля 2012

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

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

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

4 голосов
/ 13 апреля 2016

С помощью 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>

С помощью CSS-пути клипа

Эту форму также можно получить с помощью CSS-пути клипа .Поддержка браузера довольно низкая (см. canIuse ), но это простой подход.
Вот пример: 

img{
  -webkit-clip-path:polygon(0% 20%, 100% 0%,100% 100%,0% 80%);
  clip-path:polygon(0% 20%, 100% 0%,100% 100%,0% 80%);
}
<img src="http://i.imgur.com/5NK0H1e.jpg" alt=""/>
3 голосов
/ 02 апреля 2012

Если вы немного поиграете с 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);
}

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

...