带有边界半径和框阴影的弯曲效果

Question

对于所有 css 形状创建者：知道如何仅用 css 制作这种曲线吗？

Answer 1

一种可能性（如果您想使用纯 CSS）是使用径向渐变

你需要一个在左侧，中心向上，另一个在右侧，中心向下

 .test { border: solid 1px blue; width: 600px; height: 50px; background-repeat: no-repeat; background-image: radial-gradient(circle at 50% -563px, red 600px, transparent 600px), radial-gradient(circle at 50% 603px, transparent 600px, red 600px); background-size: 50% 40px; background-position: left bottom, right bottom; }

 <div class="test"></div>

Answer 2

我建议你用油漆做波浪。 将其另存为图片，并将其作为 css 中 div 的背景。 它更容易并且具有我认为相同的效果。