CSS clip on an image with a rounded path

Question

I am trying to do use a "clip path" on an image with a rounded path. I know there is a possibility to use svg clip paths, but I thought its not possible making it really responsive - so I decided to use the svg graphic on the div underneath the image - but I still have problems with mobile views, because only the left side of the svg is shown.

Can you please help me to find a better solution for this? I'm open for every solution, even it may be a totally different (and maybe better) approach. I made a fiddle to play around and to understand the problem, if you drag the preview window to a mobile view you'll see what I mean:

https://jsfiddle.net/Lrtgr858/16/

html,
body {
  background-color: #F7F7F7;
  padding: 0;
  overflow-x: hidden;
}

.svg-image-clip {
  overflow: hidden;
  top: -90px;
  position: relative;
  display: block;
  width: 120%;
  height: auto;
  content: '';
  background-image: url(https://svgshare.com/i/5r3.svg);
  background-size: cover;
  height: 200px;
  left: 60%;
  transform: translateX(-60%);
  -webkit-transform: translateX(-60%);
  -moz-transform: translateX(-60%);
}

.fullsize-image-div {
  width: 100%;
  height: 300px;
  background-image: url(http://fs1.directupload.net/images/180315/vlz5bgwm.jpg);
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fullsize-image-div h1 {
  color: white;
  font-size: 3rem;
}

<div class="fullsize-image-div">
  <h1 style="text-align:center">Hello, this is a test.</h1>
</div>
<div class="svg-image-clip"></div>

Answer 1

You can achieve this using clip-path.

There is no need svg-image-clip this element. Remove this from your code.

Add clip-path: ellipse(75% 100% at 50% 0%); to .fullsize-image-div.

Here is the working code

html,
body {
  background-color: #F7F7F7;
  padding: 0;
  overflow-x: hidden;
}


.fullsize-image-div {
  width: 100%;
  height: 300px;
  background-image: url(http://fs1.directupload.net/images/180315/vlz5bgwm.jpg);
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: ellipse(85% 100% at 50% 0%);
}

.fullsize-image-div h1 {
  color: white;
  font-size: 3rem;
}

<div class="fullsize-image-div">
  <h1 style="text-align:center">Hello, this is a test.</h1>
</div>