时间戳

首页 > 解决方案 > 在不规则形状中包含文本

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

问题描述

在不规则形状的框架内包含文本……</p>

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

带文字的形状

多亏了下面的帖子，我已经走到了那里，但是，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>

标签： css

解决方案

您可以在此处使用css 透视图。只需将其应用于父级，然后将反向效果应用于子级。这样，旧浏览器将仅显示方形背景，+ 响应式不会成为问题！

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

推荐阅读