Wie erstelle ich einen schrägen gekrümmten Behälter für ein Bild, das ebenst bleibt? ⇐ CSS

[Anonymous]

Hat jemand darüber nachgedacht, wie man HTML/CSS verwendet, um einen Effekt gemäß dem Screenshot zu erzielen? Ich muss das Bild als Hintergrund in einem schrägen Container (10DEG) mit vollständig sichtbarem Randradius an jeder Ecke anzeigen. Das Bild verbleibte Level. den Behälter schrägen und das Bild verklemmen. < /p>



.slanted-container {
transform: rotate(-10deg);
overflow: hidden;
display: inline-block;
height:400px;
width:600px;
border-radius: 50px;
}

.slanted-container .image {
transform: rotate(10deg);
display: block;
width: 100%;
max-width:600px;
height:100%;
background-size:cover;
background-position:center;
background-image:url('https://images.ctfassets.net/ihx0a8chif ... 80x720.png');
}






< /code>
Aber ich kann es nicht vermeiden, die Kanten abzuhacken und die Ecken des Randradius zu verlieren. Jede Hilfe sehr geschätzt - dies muss wirklich eine flexible Lösung sein, die nach Möglichkeit für mehrere Bilder in Flexbox -Containern gelten kann.