CSS3弯曲/透视效果

Question

例如，我有这样一个图：

我需要使它像与CSS3。在顶部有一种透视图（区域标有红色边框）：

是否有可能仅使用1图像和CSS3样式来制作这样的效果？

Answer 1

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

在伪元素上，具有相同的背景，并且此伪元素具有旋转和透视的变换。

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

.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; 
 
}

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