我真的不知道如何在我的页面上进行曲线设计。设计的所有其他部分都已由我完成。 两端的黄色曲线就是问题所在 现在这是我迄今为止在挑战中的 html 和 css：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>new_web</title>
<link rel="stylesheet" href="top.css">
<style>
body {
display: flex;
justify-content:center;
align-items:center;
background:#328FC1;
}
div {
width: 140px;
height: 140px;
background: #FADE8B;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
我尝试使用chatgpt和gemini来找到解决方法，但是这些概念是压倒性的，比如svg和我不知道的东西。到目前为止，我已经从 W3Schools 和其他网站学习了所有 html 和 css 属性
radial-gradient* {
margin: 0;
padding: 0;
min-width: 0;
min-height: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #328FC1;
min-height: 100vh;
background-image: radial-gradient(circle at top left, #FADE8B 100px, transparent 100px), radial-gradient(circle at bottom right, #FADE8B 100px, transparent 100px);
}
div {
width: 140px;
height: 140px;
background: #FADE8B;
}<div></div>