Как создать наклонной изогнутый контейнер для изображения, который остается ровным? ⇐ CSS

[Anonymous]

У кого -нибудь есть какие -либо мысли о том, как использовать HTML/CSS для достижения эффекта в соответствии с скриншотом? Мне нужно отобразить изображение в качестве фона в наклонном контейнере (10DEG) с полностью видимым радиусом границы в каждом углу, с оставшимся уровнем изображения.
pergant. Контейнер и не заседает изображение. < /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>
Но я не могу избежать отрубки краев и потерять углы радиуса границы. Любая помощь очень ценится - это действительно должно быть гибким решением, которое может применить к нескольким изображениям в контейнерах Flexbox, если это возможно.

Подробнее здесь: https://stackoverflow.com/questions/794 ... ains-level