html - CSS3 flex/透视效果

Question

比如我有这样一张图:

我需要用 CSS3 来实现它。顶部有一种视角(红色边框标记的区域):

是否有可能只使用一张图片和 CSS3 样式来制作这样的效果？

Answer 1

我已经用你的图片设置了一个div作为背景。

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

另一个伪，在相同的位置，用来遮盖原图的上半部分

.test {
  width: 600px;
  height: 230px;
  border: solid 1px red;
  background-image: url(/image/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;
}

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