如何在css中实现弯曲的斜坡效果[重复]答案

【问题标题】：How to achieve a curved ramp effect in css [duplicate]如何在css中实现弯曲的斜坡效果[重复]
【发布时间】：2019-12-13 18:31:59
【问题描述】：

在上面的图片中，您可以看到它的端到端曲线效果非常好。

但是我能做到的就是这个文本上面的图像。这是通过使用border-radius: 50%; 来实现的，但这并没有给它同样的效果。

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

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

【问题讨论】：

这可能会对您有所帮助。 stackoverflow.com/questions/17202548/wavy-shape-with-css
@RV 谢谢你，这看起来很有希望，我会研究一下。

标签： html css

【解决方案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>

【讨论】：

这看起来不错，但没有得到两端连接处的弯曲效果。