0

Hi everyone i am trying to create a wavy border in the left and right of my DIV.

Image Here

At first i tried to just crop and put it on my HTML i thought this will make my life easier but i think it did not work, i figure out that i can just use border, i still don't know if it is possible that's why i am asking for help here.

here is what i have currently.

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>

I really need help on how can i do this. any help would be really appreciated.

Rayees AC
  • 4,426
  • 3
  • 8
  • 31
Rein Mallari
  • 27
  • 5

1 Answers1

0

It can be done using 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>
Deeksha Gupta
  • 317
  • 2
  • 8