左侧和右侧带有图像图案的垂直div

Question

So I am trying to make a div like this

But I want it to be vertical because I want the div two kindof have like a paper style look to it: This is the vertical div and I want the random curly edges from above to be on the left and right side of the div On the second image you see a blue weired border. I tried to do it with border-image but this doesn't really seem to work because of the random pattern of the border image I'm trying to use.

Css I have right now:

bg-section {
border-image: url(../images/test.png) 120 round;
border-right: 40px solid transparent;
border-left: 40px solid transparent;
width: 70%;
margin: auto;
linear-gradient(rgba(199,194,183,0.2), rgba(199,194,183,0));
}

This is the border I am trying to use:

Answer 1

You can rotate the image using any tool then use it as background and rely on repeat:

 body { min-height:800vh; margin:0; background: url(https://i.stack.imgur.com/rFPJV.png) right repeat-y, url(https://i.stack.imgur.com/uMYNC.png) left repeat-y, linear-gradient(green,green) center / calc(100% - 138px) 100% no-repeat; } 

With the same image you can use pseudo element and rely on transform to rotate the image. You can also easily control the width of the borders:

 body { min-height:800vh; margin:0; position:relative; background:linear-gradient(green,green) center / calc(100% - 50px) 100% no-repeat } body:before, body:after { content:""; position:absolute; top:0; bottom:0; width:20px; /*Control the width of the border*/ background: url(https://i.stack.imgur.com/rFPJV.png) center/contain repeat-y } body:before { right:10px; } body:after { left:10px; transform:scale(-1,1); }