带有背景图像的弯曲底部边框[重复]答案

【问题标题】：Curved bottom border with background-image [duplicate]带有背景图像的弯曲底部边框[重复]
【发布时间】：2020-03-09 10:04:45
【问题描述】：

我很难找到解决这个问题的方法。

我已经看到了很多创建容器的示例，这些示例完全按照我的意愿使用弯曲的bottom border，但它们都具有平面或渐变background-color。

我需要一个 container 和一个 background-image 和一个弯曲的 bottom border 和一个像你在图片中看到的底部边框颜色。

我看到的所有示例的问题是，如果我使用CSS 应用bottom border 的常用方法，background-image 会失真。

这是一个简单明了的 html 结构，所以如果你想帮助，你有一个参考。

<div class="wrapper" style="background-image:url('images/someimage.jpg');">
  <p>some text on the background image</p>
  <a href="#">A button </a>
</div>

提前致谢。

【问题讨论】：

我将如何解决这个问题是：我对背景图像进行 Photoshop 处理，或者我将下一个元素弯曲到图像元素我猜，没有直接的 css 属性可以弯曲背景图像！（如果我错了，请纠正我）
@mplungjan - 如果你看看弯曲边框的角落，你会发现它一直向上，这正是我在说的，border-bottom-*-半径不能解决问题。任何扩大宽度的努力都会破坏图像。
stackoverflow.com/questions/30766857/…

标签： html css

【解决方案1】：

看看使用clip-path，它不是一个完美的解决方案，需要对数字进行一些调整才能让它看起来像你想要的那样。

请看下面的例子：

main {
  height:500px;
  background-color:#ccc;
}

.wrapper {
  background-image:url('https://picsum.photos/id/1039/1280/720');
  background-repeat:no-repeat;
  background-position:center;
  height:350px;
  clip-path: ellipse(100% 60% at 50% 40%);
}

<main>

  <div class="wrapper"></div>
  
  <h2>This is some more content</h2>
</main>

JSFiddle

更多信息请见：CSS-Tricks

【讨论】：