我想用CSS修改这个矩形div/background的底部,所以结果是这样的:
.curved {
margin: 0 auto;
width: 800px;
height: 500px;
background: lightblue;
}Run Code Online (Sandbox Code Playgroud)
<div class="container">
<div class="curved"></div>
</div>Run Code Online (Sandbox Code Playgroud)
我试图在背景颜色的中心添加一条轻微的曲线。我正在尝试应用线性渐变背景颜色,然后它会被切断并变成白色背景。
我想在中心应用这条轻微的曲线,如下所示:
我尝试通过添加边框底部的左右半径来弯曲背景来实现此目的,这确实有效,但曲线更多地应用于边缘,而我试图从中心稍微弯曲。
这是我的代码的示例:
.content-container {
height: 150px;
background: linear-gradient(180deg, #FAFDFF 0%, #E8F3F9 100%);
border-bottom-left-radius: 13%;
border-bottom-right-radius: 13%;
}Run Code Online (Sandbox Code Playgroud)
<div class="content-container">
<p>Testing</p>
<br/>
<br/>
<p>Testing</p>
</div>Run Code Online (Sandbox Code Playgroud)
我尝试过使用负百分比来使曲线更靠近中心,如上图所示,但我没有运气。我怎样才能实现与上图类似的效果?