To achieve a similar visual effect where the image appears unchanged but the surrounding shape has a perspective twist, you can implement a technique like the one demonstrated below.
div.container {/*creates the top section effect and crops the image*/
position: absolute;
top: 0;
left: 0;
border-radius: 20px 20px 0 0;
height: 200px;
width: 300px;
overflow: hidden;
border: 10px solid blue;
transform: skewY(5deg);
}
.container img {/*removes the skew effect from the image*/
transform: skewY(-5deg);
transform-origin: top left;
height:100%;width:100%;
}
.wrapper {
display: inline-block;
height: 200px;
width: 300px;
position: relative;
/* for demonstration purposes only */
margin: 50px 50px;
}
.wrapper:after { /* create the bottom section effect*/
content: "";
position: absolute;
bottom: -50%;
left: 0;
height: 100%;
width: calc(100% + 20px);
transform: skewY(-10deg);
transform-origin: bottom right;
background: blue;
z-index: -1;
border-radius: 20px;
}
<div class="wrapper">
<div class="container">
<img src="http://lorempixel.com/500/500" />
</div>
</div>
To achieve this effect, you need to use a wrapper div as shown above. This allows the implementation of a pseudo element (:after in CSS) to generate the lower part of the shaped container:
+----------------------------+
| |
| _______/ <-- curved corner
| ------/
| ------/
\-----/
/\
\_____ also curved corner
The container div is used to create the upper part of the shape. By applying the skew transformation, the shape complements the :after element by pulling the right side downwards.
The overflow:hidden property ensures any part of the image that extends beyond the boundaries of the container div is cropped (the border-radius:20px 20px 0 0; specifically affects the upper corners).
Lastly, pay attention to the .container img styling. When skewing the .container div, it's crucial to 'un-skew' the image so it retains its rectangular appearance. Hence, the 'counter-skew' adjustment here (transform: skewY(-5deg);).