CSS3弯曲/透视效果

Question

例如，我有这样一张照片：

我需要使用CSS3来做到这一点。在顶部有一种透视（标有红色边框的区域）：

甚至可以仅使用1个图像和CSS3样式来产生这样的效果吗？

Answer 1

我设置了一个以图像为背景的div。

在伪元素上，相同的背景，这个伪有旋转和透视的变换。

另一个伪，在同一位置，掩盖原始图像的上半部分

＆＃13;

＆＃13;

.test {
  width: 600px;
  height: 230px;
  border: solid 1px red;
  background-image: url(https://i.stack.imgur.com/wQ1Bp.png);
  background-size: 600px 230px;
  position: relative;
}
.test:after,
.test:before {
  content: "";
  width: 100%;
  height: 30%;
  top: 0px;
  position: absolute;
}
.test:before {
  background-color: white;
}
.test:after {
  background-image: inherit;
  background-size: inherit;
  border: solid 1px green;
  transform: perspective(400px) rotateX(50deg);
  transform-origin: center bottom;
}

＆＃13;

<div class="test"></div>

＆＃13;

＆＃13;

＆＃13;