带有圆角路径的图像上的CSS剪辑

Question

我正在尝试使用＆＃34;剪辑路径＆＃34;在圆形路径的图像上。我知道有可能使用svg剪辑路径，但我认为它不可能使它真正响应 - 所以我决定在图像下面的div上使用svg图形 - 但我仍然有移动视图的问题，因为只有显示svg的左侧。

你能帮我找一个更好的解决方案吗？我会为每个解决方案开放，即使它可能是一个完全不同（也许更好）的方法。我做了一个小提琴来解决问题，如果你将预览窗口拖到移动视图中，你会看到我的意思：

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用clip-path实现此目的。

此元素无需svg-image-clip。从代码中删除它。

将clip-path: ellipse(75% 100% at 50% 0%);添加到.fullsize-image-div。

以下是工作代码

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>

Answer 2

你有很多选择，你不需要你做一个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;
}

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

FIDDLE

2. 如果您想要现代CSS3 clip-path：可以使用ellipse()轻松完成：

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

我还为尺寸/字体添加了一些vw，以便在响应时更加流畅，但请注意这在IE中不起作用（剪辑路径）...再次，您可以随意编辑：< / p>

Codepen

P.S。我喜欢使用codepen：）