Currently I'm trying to create a div with a custom shape. Note that the div also contains content. So the div has to scale properly and maintain the shape. That's why I'm trying to do this with a svg, using clip-path to mask that div.
Here is an example of how it should look like on the website
I know I can just use a svg or another div to set it as the background of that div using position:absolute; . But that's not what I want, because that doesn't scale properly and eventually the content will go "over/outside" that background div.
This is what I've tried: using the svg to mask the div as such:
.sidebar {
position: relative;
padding: 70px 30px;
background-color: #00B7BC;
}<div class="sidebar" style="-webkit-clip-path: url(#myshape);">
<article>
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 400 600">
<defs>
<clipPath clipPathUnits="userSpaceOnUse" id="myshape">
<path class="st0" d="M397.4,234.1c0-26.2-0.4-50.5-1.1-72.6c0-5.1,0-10-0.4-14.7c-0.7-26.5-2.2-50.1-4-70.7
c-1.9-22.1-3.7-44-5.5-64.3v-0.7c-1.1,0-2.2-0.4-3.7-0.4c-0.4,0-0.4,0-0.7-0.4c-14-1.5-29.5-3-46.4-4.8c-14.4-1.9-31.3-3.3-51.6-4.5
h-3.7C258.9,0.4,235.7,0,211.4,0c-26.5,0-51.9,0.4-76.2,1.1c-24.3,1.1-46,2.6-64.8,4.5c-20.6,1.8-40.5,3.7-59.3,5.5
C9.3,31.7,7.4,54.5,5.6,78.8C3.7,99.4,2.2,123,1.2,149.2c-1.1,25.9-1.1,55.1-1.1,86.8L0,236c0,26.2,0.4,50.5,1.1,72.6
c0,5.1,0,10,0.4,14.7c0.7,26.5,2.2,50.1,4,70.7c1.9,22.1,3.7,44,5.5,64.3v0.7c1.1,0,2.2,0.4,3.7,0.4c0.4,0,0.4,0,0.7,0.4
c14,1.5,29.5,3,46.4,4.8c14.4,1.9,31.3,3.3,51.6,4.5h3.7c21.3,0.7,44.5,1.1,68.8,1.1c26.5,0,51.9-0.4,76.2-1.1
c24.3-1.1,46-2.6,64.8-4.5c20.6-1.8,40.5-3.7,59.3-5.5c1.9-20.6,3.7-43.5,5.5-67.8c1.8-20.6,3.3-44.2,4.4-70.4
C397.3,294.9,397.3,265.8,397.4,234.1L397.4,234.1z"/>
</clipPath>
</defs>
</svg>
</div>This works decent, but not good enough since the div doesn't scale properly. Whenever I look on a mobile screen width the div/svg breaks.
Recently, I'm getting a lot of request like this. I would love to know the proper way of doing this. Is there something I can improve on (probably, yes)? Please help me to understand what I have to do.
Thank you in advance!