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>