我希望得到这个CSS形状，并在其中有一个背景图片

Question

如何仅使用CSS和HTML创建此形状？

Answer 1

您可以使用border-radius属性实现与此类似的形状。您可以使用这些值，直到获得所需的完美形状。

HTML：

<div class="shape">
  <img src="https://cdn.stocksnap.io/img-thumbs/960w/2RTQTEA00I.jpg">
</div>

CSS：

.shape{
  width:500px;
  height:400px;
  margin:50px auto;
  overflow:hidden;
  border-radius:0 0 10% 50%;
}
.shape img{
  max-height:100%;
}

这是一个小提琴：https://jsfiddle.net/p80b7fp6/