Обрезать изображение с очень большим радиусом границы

Question

Сегодня у меня есть макет от дизайнера для веб-сайта.

На фоне шаблон по всему телу. Изображение заголовка изогнуто с правой стороны.

Вот скриншот:

Я не могу построить такого рода радиуса с border-radius в CSS. Маска PNG не является вариантом, поскольку шаблон должен соответствовать.

Знает кто-то специальный трюк, чтобы построить такой тип border-radius в CSS?

Answer 1

обертка, положение, радиус и тень могут сделать что-то очень близко:

для получения дополнительной информации о границе радиусе:

https://www.w3.org/TR/css3-background/#the-border-radius

div { 
 
    box-shadow:inset 0 0 10px white, inset 0 0 15px gray; 
 
    display:table;/* or inline-block/inline-table */ 
 
    overflow:hidden;/* clip content */ 
 
    border-radius:0 20% 20% 0 /80%;/* cut off basic border-radius */ 
 
    position:relative;/* bring at front so img doesn't fade behind body */ 
 
} 
 
img { 
 
    display:block;/* gap underneath .. or vertical-align:top/bottom */ 
 
    position:relative; 
 
    z-index:-1;/* let inset shadow of parent lay over it */ 
 
} 
 
body { 
 
    background:brown 
 
}

<div> 
 
    <img src="http://lorempixel.com/300/250"/> 
 
</div>

Answer 2

Вы можете получить эту обрезку циркуляр, если смещение обертки слева и сверху (за экран)

div { 
 
    overflow:hidden; 
 
    border-radius: 100%; 
 
    position:relative; 
 
    width: 600px; 
 
    height: 600px; 
 
    left: -400px; 
 
    top: -200px; 
 
} 
 
img { 
 
    display:block; 
 
    position: absolute; 
 
    right: 0px; 
 
    top: 200px; 
 
}

<div> 
 
    <img src="http://lorempixel.com/300/250"/> 
 
</div>

Answer 3

Если вы хотите, чтобы создать полный круг, вы могли бы использовать трюк с псевдоэлементы.

Что-то вроде:

div { 
 
    height: 500px; 
 
    width: 500px; 
 
    position: relative; 
 
    border-radius:50%;overflow:hidden; 
 
    transform:translate(-20%, -20%); /*just for demo*/ 
 
} 
 
div:before{ 
 
    content:""; 
 
    position:absolute; 
 
    top:20%;height:60%; 
 
    left:20%; width:80%; 
 
    background:url(http://lorempixel.com/500/600); 
 
    background-size:100% 100%;

<div></div>