包含不规则形状的文本

Question

在不规则形状的框架中包含文本…

我正在尝试以响应速度最快，向后兼容的方式实现以下目标。我赞赏我可能需要在某个地方做出重大妥协。

多亏了以下post，我才得以实现，但是，svg背景不会使用包含文本或查看端口的大小进行调整，这在我考虑之后也是可以预期的。

如果我有一个带边框的div块，效果会更好。但是，我可以以某种方式带来左下角和右下角？

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

完整代码也在下面：

.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>

Answer 1

您可以在此处使用css perspective。只需将其应用于父项，然后将相反的效果应用于子项。这样，较旧的浏览器将仅显示方形背景，而响应式将不再是问题！

.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：由于最终容器是矩形，因此文本不符合形状。