带有背景图像的弯曲底边框

Question

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

我已经看到许多示例，它们完全按照我的意愿创建了一个弯曲的bottom border容器，但是它们都具有普通的或渐变的background-color。

我需要一个container，它带有一个background-image和一个弯曲的bottom border，并且底部边框的颜色如您在图片中看到的那样。

我看到的所有样本的问题是，如果我使用通过background-image来应用bottom border的常用方法，则CSS会变形。

这是一个简单的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> 

谢谢。

Answer 1

使用<h5 class="mb-0 text-gray-800">Welcome, <span style="text-transform:capitalize">@User.Identity.Name.Replace("AD-GROUP-NAME\\", "").Replace(".", " ")</span></h5>进行了研究，这不是一个完美的解决方案，需要对数字进行一些调整才能使它看起来像您希望的那样。

请参见以下示例：

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

JSFiddle

可以找到更多信息：CSS-Tricks