CODEWITHSUNDEEP
css
Grant Smith
Grant Smith

Reputation: 351

Contain Text Within Irregular Shape

Contain text within a Irregular Shaped Frame…

I am trying to achieve the following in the most responsive, backward compatible way as possible. I appreciate that I may need to make a big compromise somewhere.

Shape with text

I have got part way there thanks to the following post, however, the svg background doesn't resize with the containing text or view port, too be expected after I had thought about it.

This would work better if I had a div block, which had a border. However, I could bring the bottom left and right corner in somehow?

https://codepen.io/grantsmith/pen/YMVMgO

Full code is also 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>

Upvotes: 0

Views: 369

Answers (1)

GuCier
GuCier

Reputation: 7425

You can use css perspective here. Just apply it to the parent, then apply the reverse effect to the child. This way older browsers will simply display a square background, + responsive won't be an issue!

.container {
  font-family: Monospace;
  border: 3px solid black;
  text-align: center;
  padding: 0 20px;
  transform: perspective(10px) rotateX(-0.3deg);
  border-radius: 8px;
  max-width: 600px;
}

.container div {
  transform: perspective(10px) rotateX(0.3deg);
}

h2 {
  display: inline-block;
  padding: 0 10px;
  background-color: #fff;
  margin: -10px 0 0;
}
<div class="container">
  <div>
    <h2>What's the difference? Craft vs plant</h2>
    <p>I am trying to achieve the following in the most responsive, backward compatible way as possible. I appreciate that I may need to make a big compromise somewhere.</p>
  </div>
</div>

PS: The text does not follow the shape, as the final container is a rectangle.

Upvotes: 1

Related Questions