使用圆形路径对图像进行CSS剪辑

Question

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

你能帮我找到更好的解决方案吗？我愿意接受任何解决方案，即使它可能是完全不同（也许更好）的方法。我制作了一个 fiddle 来玩耍和理解问题，如果你将预览窗口拖动到移动视图，你就会明白我的意思：

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>

- chrizzy09

Answer 1

您可以使用clip-path来实现此功能。

不需要使用svg-image-clip元素。请从您的代码中删除它。

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

以下是可用的代码

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>

- Anzil khaN

Answer 2

你有很多选择，不必要使用svg元素，我会提供两种方式。

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只是改变了一些东西。尺寸只是我复制它，但你可以随意编辑：

FIDDLE

2. 如果你想要现代的CSS3 clip-path：这可以很容易地通过ellipse()来实现：

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

我还添加了一些用于调整大小/字体的vw，以便在响应式时更加流畅，但请注意这在IE（clip-path）中不起作用...你可以随意编辑：

Codepen

p.s. 我喜欢使用Codepen :)

- Riskbreaker