Html CSS剪辑在具有圆形路径的图像上

我试图在一个圆形路径的图像上使用“剪辑路径”。我知道有可能使用svg剪辑路径，但我认为这不可能使其真正响应-因此我决定在图像下方的div上使用svg图形-但我仍然存在移动视图的问题，因为只显示svg的左侧

你能帮我找到更好的解决办法吗？我对每一种解决方案都持开放态度，即使它可能是一种完全不同（也许更好）的方法。我做了一把小提琴来摆弄和理解问题，如果您将预览窗口拖动到移动视图，您将看到我的意思：

html，
身体{
背景色：#F7F7F7；
填充：0；
溢出x：隐藏；
}
.svg图像剪辑{
溢出：隐藏；
顶部：-90px；
位置：相对位置；
显示：块；
宽度：120%；
高度：自动；
内容：''；
背景图片：url(https://svgshare.com/i/5r3.svg);
背景尺寸：封面；
高度：200px；
左：60%；
转化：translateX（-60%）；
-webkit转换：translateX（-60%）；
-moz变换：translateX（-60%）；
}
.全尺寸图像分割{
宽度：100%；
高度：300px；
背景图片：url(http://fs1.directupload.net/images/180315/vlz5bgwm.jpg);
背景尺寸：封面；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.全尺寸图像分区h1{
颜色：白色；
字体大小：3rem；
}

你好，这是一个测试。

您有许多选项，不需要使用svg元素，我将提供2个选项

1。您可以使用伪元素，在该元素中，您可以仅在底部边上有一个边界半径，并给边界一些白色。。。我之所以提出第一个，是因为它在任何地方都适用：

例如：

.fullsize-image-div:before {
    content: "";
    position: absolute;
    bottom: -100px;
    left: 50%;
    margin-left: -900px;
    height: 1000px;
    width: 1600px;
    border-radius: 100%;
    border: 100px solid #fff;
}

我用你的小提琴来改变一些东西。大小只是我复制的，但您可以随意编辑：

2.如果您想要现代CSS3

剪辑路径

：这可以通过

椭圆（）轻松完成：

我还添加了一些用于调整大小/字体的
vw
，以便在响应时更加流畅，但请注意，这在IE（剪辑路径）中不起作用。您可以根据自己的意愿再次编辑：


p、 我喜欢使用codepen:）
您可以使用
剪辑路径来实现这一点

无需
svg图像剪辑
此元素。将其从代码中删除

添加
clip路径：椭圆（75%100%50%0%）至
。全尺寸图像div

这是工作代码


html，
身体{
背景色：#F7F7F7；
填充：0；
溢出x：隐藏；
}
.全尺寸图像分割{
宽度：100%；
高度：300px；
背景图片：url(http://fs1.directupload.net/images/180315/vlz5bgwm.jpg);
背景尺寸：封面；
显示器：flex；
对齐项目：居中；
证明内容：中心；
剪辑路径：椭圆（85%100%在50%0%）；
}
.全尺寸图像分区h1{
颜色：白色；
字体大小：3rem；
}

你好，这是一个测试。

clip-path: ellipse(100% 98% at 50% 0%);