Place text within a uniquely shaped border…
I am attempting to achieve this goal in the most responsive and backward compatible way possible. I understand that compromise may be necessary.
I have made progress with the help of this thread, but the svg background does not resize with the text or viewport, which is expected upon reflection.
This would be more successful if I had a div block with a border. However, I could somehow adjust the bottom left and right corners?
https://codepen.io/grantsmith/pen/YMVMgO
The complete code is also provided below:
.container {
position: relative;
width: 1800px;
height: 400px;
margin: 1.5rem;
padding: 1.5rem;
box-sizing: border-box;
}
.text {
position: absolute;
top: 0;
left: 0;
display: block;
width: 1800px;
height: 400px;
z-index: 2;
padding: 3rem 3rem;
}
.shape {
width: 50%;
height: 85%;
}
.left {
shape-outside: polygon(0 0, 11% 98%, 50% 100%, 10% 100%);
float: left;
}
.right {
shape-outside: polygon(100% 0, 99% 98%, 50% 100%, 100% 100%);
float: right;
}
h1 {
font-size: 3rem;
text-align: center;
margin-top: -2.75rem;
}
span {
background: #fff;
padding: 0 2rem;
position: relative;
z-index: 1;
}
p {
font-size: 2rem;
}<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 894.4 174">
<path d="M865.8,187H34.2c-5.1,0-9.4-2.5-10.2-6v-.2L2.9,21.4a5.8,5.8,0,0,1,1.2-4.7C5.9,14.4,9.4,13,13.2,13H886.8c3.8,0,7.3,1.4,9.1,3.7a5.8,5.8,0,0,1,1.2,4.7L876,180.9h0C875.2,184.5,870.9,187,865.8,187ZM26.9,180.4c.6,2,3.8,3.6,7.3,3.6H865.8c3.5,0,6.7-1.6,7.3-3.6l21-159.6h0a2.4,2.4,0,0,0-.5-2.1c-1.2-1.6-3.9-2.6-6.8-2.6H13.2c-2.9,0-5.6,1-6.8,2.6a2.4,2.4,0,0,0-.5,2.1v.2Zm847.6.2Z" transform="translate(-2.8 -13)" style="fill:#1d1d1b"/>
</svg>
<div class="text">
<div class="shape left"></div>
<div class="shape right"></div>
<h1><span>Cras mattis consectetur purus sit amet fermentum</span></h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras
mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>