This question already has answers here:
Wrapping text inside a CSS shape
                                
                                    (2个答案)
                                
                        
                                9个月前关闭。
            
                    
我有一个标题元素,应该具有梯形形状。标题元素内的文本必须遵循梯形的边界,而不是矩形框。

有可能在CSS中这样做吗?

这是参考图像:

html - 在CSS中将元素设为非矩形以编写文本-LMLPHP

如您所见,文本为矩形,不遵守黑色背景的边界。

到目前为止,这是我的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>





我尝试在div之前添加另一个h1并将其应用shape-outside属性,但是无论我赋予它什么值。没有什么变化。

谢谢。

最佳答案

您目前正在通过设置背景渐变来获得白色形状。而是使用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>





希望有帮助!

关于html - 在CSS中将元素设为非矩形以编写文本,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55199838/

10-12 07:24
查看更多