如何在CSS中实现弯曲的斜坡效果

Question

在上图中，您可以看到它如何具有很好的首尾相接的弯曲效果。

但是本文上方的图片是我所能实现的。这是通过使用border-radius: 50%;来实现的，但这并不能带来相同的效果。

不确定是否有人知道这样做是否可行？

我当时正在考虑将其创建为图像，因为这样可能会更容易。

Answer 1

.withimg{
	background-color: #000;
	text-align: center;
}

.withimg img {
    border-radius: 50%;
    border: 50px solid #000000;
    margin-bottom: -100px;
}
.belowbox{
	height: 200px;
	width: 100%;
	background-color: #10141d;
}

<div class="withimg">
    <img src="https://picsum.photos/id/237/200" alt="">            
</div>
<div class="belowbox"></div>