大家好，我正试图在我的div.的左右两侧创建一个波浪形边界
此处的图像
起初，我试着裁剪并将其放在我的HTML上，我认为这会让我的生活更轻松，但我认为它不起作用，我发现我可以使用border，我仍然不知道这是否可能，这就是我在这里寻求帮助的原因。
这是我目前拥有的。
body{
overflow: hidden;
}
.user_wrapper{
display: flex;
height: 100%;
}
.user_wrapper .user_category{
width:80%;
background-image: url('https://i.ibb.co/6RD9YDX/abc-books-chalk-chalkboard-265076.jpg');
background-size: cover;
background-position: center center;
padding: 0;
height: 100vh;
}
.user_wrapper .user_category .category_container{
display: flex;
height: 100%;
}
.user_wrapper .user_category .category_container .first_content{
width: 33.33%;
height: auto;
border-right: 1px solid #FAFAFA;
}
.user_wrapper .user_category .category_container .second_content{
width: 33.33%;
height: auto;
border-right: 1px solid #FAFAFA;
border-left: 1px solid #FAFAFA;
}
.user_wrapper .user_category .category_container .third_content{
width: 33.33%;
height: auto;
border-left: 1px solid #FAFAFA;
}
.category_container p{
margin-top: 80px;
color:#FAFAFA;
text-align: center;
}<body>
<div class="user_wrapper">
<div class="user_category">
<div class="category_container">
<div class="first_content">
<p>First Content</p>
</div>
<div class="second_content">
<p>Second Content</p>
</div>
<div class="third_content">
<p>Third Content</p>
</div>
</div>
</div>
</div>
</body>我真的需要帮助，我该怎么做。任何帮助都将不胜感激。
可以使用SVG来完成。
<div style="height: 150px; overflow: hidden;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M230.80,-9.38 C152.69,70.06 270.03,70.06 188.48,154.44 L500.00,150.00 L500.00,0.00 Z" style="stroke: none; fill: #08f;"></path></svg></div>