css - 在不规则形状内包含文本

Question

在不规则形状的框架内包含文本......

我正在尝试以尽可能响应最快、向后兼容的方式实现以下目标。我明白我可能需要在某处做出重大妥协。

由于以下 post，我已经完成了部分工作，但是，svg 背景不会随着包含的文本或视口(viewport)调整大小，在我考虑之后也是意料之中的。

如果我有一个带边框的 div block ，效果会更好。但是，我可以通过某种方式将左下角和右下角带入吗？

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这里。只需将它应用于 parent ，然后将相反的效果应用于 child 。这样旧的浏览器将简单地显示方形背景，+ 响应不会成为问题!

.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:文字不遵循形状，因为最终容器是一个矩形。