Как обрезать и преобразовать изображение, добавив закругленные углы и перспективу?

Как я могу использовать HTML и CSS для создания div с изображением внутри него, которое обрезается и маскируется, чтобы оно выглядело следующим образом:

div с перекошенной перспективой, содержащий аналогично преобразованное изображение

Я пытался найти способ сделать это около 2 часов и ничего не получил, поэтому я просто надеялся, что кто-то может указать мне правильное направление. Чтобы быть конкретным, я хочу обрезать изображение так, чтобы два верхних угла были закруглены, и вставить его в элемент div с четырьмя закругленными углами и отступом 1/4 снизу, при этом оба элемента должны быть преобразованы так, чтобы он выглядел правым краем. дальше от зрителя, чем слева.


css css-shapes image-clipping image-masking
person geoffs3310    schedule 25.01.2016    source источник

Ответы (2)


arrow_upward
9
arrow_downward

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

div.inner {/*gives top section effect, also crops the image*/
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 20px 20px 0 0;
  height: 200px;
  width: 300px;
  overflow: hidden;
  border: 10px solid red;
  transform: skewY(5deg);
}

.inner img {/*removes transform skew from image*/
  transform: skewY(-5deg);
  transform-origin: top left;
  height:100%;width:100%;
}

.wrap {
  display: inline-block;
  height: 200px;
  width: 300px;
  position: relative;
  
  /*for demo only*/
  margin: 100px 100px;
}

.wrap:after { /*give bottom section the effect*/
  content: "";
  position: absolute;
  bottom: -50%;
  left: 0;
  height: 100%;
  width: calc(100% + 20px);
  transform: skewY(-10deg);
  transform-origin: bottom right;
  background: red;
  z-index: -1;
  border-radius: 20px;
}
<div class="wrap">
  <div class="inner">
    <img src="http://lorempixel.com/500/500" />
  </div>
</div>

Чтобы создать эффект, мне пришлось включить этот wrapper div. Это позволяет использовать псевдоэлемент (:after css) для создания нижней части фигуры:

 +----------------------------+
 |                            |
 |                    _______/  <-- curved corner
 |             ------/
 |      ------/
 \-----/
   /\
    \_____ also curved corner

Затем div inner используется для создания верхней части формы. Используя объявление skew, фигура допускает противоположность элемента :after, перемещая правую сторону красной фигуры вниз.

overflow:hidden гарантирует, что любая часть изображения, которая не помещается в этот inner div, будет обрезана (border-radius:20px 20px 0 0; гарантирует, что будут затронуты только верхние углы).

Последнее, на что стоит обратить внимание, это .inner img css. Так как я перекосил div .inner, важно затем «выровнять» изображение, чтобы оно оставалось прямоугольной формы. Вот почему здесь есть «встречный перекос» (transform: skewY(-5deg);).

person jbutler483    schedule 25.01.2016

arrow_upward
6
arrow_downward

Вот моя попытка использовать perspective.

Спасибо @vals за указание на то, что perspective можно использовать как часть transform.

* {
  box-sizing: border-box;
}
figure {
  perspective: 1000px;
  width: 420px;
  margin: 5em auto;
  height: 350px;
  background: red;
  text-align: center;
  padding: 10px;
  border-radius: 25px;
  transform: perspective(1200px) rotateY(50deg);
}
img {
  border-radius: 20px 20px 0 0;
}
<figure>
  <img src="http://lorempixel.com/400/200/sports/1/" alt="" />
</figure>

person Paulie_D    schedule 25.01.2016
comment
Вам не нужна обертка. Установите преобразование: перспектива (1000 пикселей) rotateY (50 градусов); на самой фигурке - person vals; 25.01.2016