html - 具有圆形路径的图像上的 CSS 剪辑

Question

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

你能帮我找到一个更好的解决方案吗？我对每一种解决方案都持开放态度，即使它可能是一种完全不同(也许更好)的方法。我做了一个 fiddle 来玩弄并理解问题，如果你将预览窗口拖到移动 View 你会明白我的意思:

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

您可以使用 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>