在不规则形状中包含文本答案

【问题标题】：Contain Text Within Irregular Shape在不规则形状中包含文本
【发布时间】：2019-04-11 17:31:46
【问题描述】：

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

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

感谢下面的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>

【问题讨论】：

你可以用transform skew实现斜角，例子在这里stackoverflow.com/questions/29073804/…
听起来很完美，会研究一下，非常感谢@Huangism
@Huangism 我不认为未倾斜的内容会遵守倾斜容器的界限。
我可以只玩填充，当然看起来比我第一次尝试更有希望......
@zgood 如果它没有倾斜，它就不会服从它，但你只需要用 % 填充（动态）调整它，它最终会到达那里

标签： css

【解决方案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：文字不跟随形状，因为最终的容器是一个矩形。

【讨论】：