Consider these two potential solutions:
Utilizing Background-size Property
An easy approach is to use a background image that matches the desired shape and fits the entire size of the div, adjusting to its size changes as well. Here's an example:
.mydiv {
width:100%;
background:url(https://i.sstatic.net/Kbmfx.png);
background-size:100% 100%;
padding-bottom:30px;
}
<div class="mydiv">
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
</div>
In case you opt for a vector image like SVG instead of a bitmap/raster image (e.g., PNG/JPEG), you can avoid distortion or pixelation issues when scaling. The use of SVG is widely accepted across major browsers, but do note that the solution mentioned here relies on background-size, which may not be compatible with IE9 and below. If this method proves effective, then SVG should work accordingly.
Implementing an Absolute-positioned Image
If you need support for older versions such as IE8 and earlier, another alternative involves adding a position:relative attribute to .mydiv, followed by positioning an image with position:absolute to cover the width/height of
.mydiv</code positioned at the back using a negative z-index.</p>
<p>This setup simulates having the image as a background while maintaining compatibility with CSS2, thereby supporting older IE versions. Although employing SVG can ensure sharp visuals without pixelation concerns, it may not function properly on pre-IE8 versions.</p>
<p>Below is a demonstration:</p>
<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>.mydiv {
position:relative;
width:100%;
padding-bottom:30px;
}
.mydiv .bg {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}
<div class="mydiv">
<img src="https://i.sstatic.net/Kbmfx.png" alt="" class="bg" />
<p>Line 0</p>
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
<p>Line 4</p>
<p>Line 5</p>
</div>