大家好，我正在尝试创建一个波浪边框在左右我的div。
此处为图像
一开始我试图只是裁剪和把它放在我的HTML我以为这将使我的生活更容易，但我认为它没有工作，我发现我可以只是使用边框，我仍然不知道是否有可能，这就是为什么我在这里寻求帮助。
这是我目前所拥有的。
null
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>null
我真的需要你帮我怎么做。如有任何帮助，我们将不胜感激。
这可以使用SVG来完成。
null
<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>