gpt4 book ai didi

html - 在CSS中使一个元素成为非矩形来写文本

转载 作者:行者123 更新时间:2023-11-28 14:20:55 27 4
gpt4 key购买 nike

<分区>

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

在 CSS 中可以这样做吗?

这是一张引用图片:

enter image description here

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

到目前为止,这是我的 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 属性,但无论我给它什么值。没有任何变化。

谢谢。

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com