在CSS中创建一个元素non-rectangular来写文字

Question

我有一个标题元素，它的形状应该是梯形。标题元素内的文本必须遵循梯形而不是矩形框的边界。

是否可以在 CSS 中这样做？

这是一张参考图片：

如您所见，文本为矩形，不考虑黑色背景的边界。

到目前为止，这是我的 CSS 和 HTML：

div.container {
  width: 1920px;
  height: 1080px;
  background: linear-gradient(120deg, black 50%, white 50%);
}
h1 {
  font-size: 3.5rem;
  padding: 2rem 1rem;
  color: white;
  text-align:  center;
  width: 940px;
}

<div class="container">
 <h1>This is any random piece of text.</h1>
</div>

我尝试在 h1 之前添加另一个 div 并在其上应用 shape-outside 属性但无论我给它什么值。没有任何变化。

谢谢。

Answer 1

这可以实现，如果文本环绕另一个具有以下元素的元素：

.wrap-around {
 float: left;
 shape-outside: polygon("settings");
 clip-path: polygon("settings");
}

当然，这些设置会根据您的需要进行调整。

Take a look here

就我个人而言，我无法编辑以下代码片段以使其与您的示例相似，但这绝对是一种方法。

来自 mozilla mdn 的示例：

.main {
  width: 530px;
}

.left,
.right {
  width: 40%;
  height: 12ex;
  background-color: lightgray;
}

.left {
  -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.right {
  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

p {
  text-align: center;
}

<div class="main">
  <div class="left"></div>
  <div class="right"></div>
  <p>
    Sometimes a web page's text content appears to be
    funneling your attention towards a spot on the page
    to drive you to follow a particular link. Sometimes
    you don't notice.
  </p>
</div>

Answer 2

您目前正在通过设置背景渐变来实现白色形状。相反，使用 shape-outside 来实际创建形状并让文本环绕它。像这样：

.container {
  width: 400px;
  height: 200px;
  background-color: black;
  color: white;
}

.shape {
  width: 100%;
  height: 200px;
  background-color: white;
  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

p {
  text-align: left;
}

<div class="container">
  <div class="shape"></div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu erat pharetra orci rhoncus dignissim. Nullam imperdiet justo felis, id venenatis velit pretium in. Donec commodo odio nisl, ut facilisis dui vulputate at. Nullam feugiat semper urna non efficitur. 
  </p>
</div>

希望对您有所帮助！

在CSS中创建一个元素non-rectangular来写文字

Make an element non-rectangular in CSS to write text

html

css

css-shapes