在CSS形状内包装文字 [英] Wrapping text inside a CSS shape

问题描述

我想在三角形内对齐/环绕文本以遵循其边框形状。
我已经用平行四边形作了一个例子，但结果并不令人满意。

  .parallelogram {
宽度：200像素； 
 padding：20px; 
 -webkit-transform：偏斜（-30deg）; 
 -moz-transform：偏斜（-30deg）; 
 transform：skew（-30deg）; 
背景：#ccc; 
保证金：80px； 
} 
 
 .parallelogram .text {
 width：200px; 
 -webkit-transform：偏斜（30deg）; 
 -moz-transform：偏斜（30deg）; 
 transform：skew（30deg）; 
保证金：20px； 
} 
  

工作原理

• 在文本之前创建一个新元素< div class = shape>< / div>



• 使用

   创建一个细长的平行四边形形状shape-outside：多边形（90％0 ，100％0，10 ％100％，0 100％）; 
    



• 让它 float：left 使文字与形状的右边框对齐


• 调整其高度和宽度根据您的变换的角度：skew（）

好：由于 polygon（）方法的缘故，您可以创建自己喜欢的形状，并让文本围绕它浮动。您甚至可以通过将相对单位设置为宽度和高度来使它响应。

不好的：在IE / Edge中不起作用，请参见 caniuse 和 MDN 。

出于演示目的，我添加了背景和剪切路径到形状，以了解其实际工作原理。当然，您可以删除这3条规则：

  .shape {width：50px ;高度：80px； -webkit-shape-outside：多边形（90％0，100％0，10％100％，0 100％）;形状外：多边形（90％0，100％0，10％100％，0 100％）;向左飘浮; / *以下三行仅用于演示目的* /背景：＃444; -webkit-clip-path：多边形（90％0，100％0，10％100％，0 100％）;剪切路径：多边形（90％0，100％0，10％100％，0 100％）;}。parallelogram {width：300px;填充：20px 20px 20px 0; -webkit-transform：倾斜（-30deg）; -moz-transform：倾斜（-30deg）；变换：倾斜（-30deg）;背景：#ccc; margin：20px auto;}。parallelogram .text {width：300px; -webkit-transform：倾斜（30deg）; -moz-transform：偏斜（30deg）；转换：偏斜（30deg）;}  

 < div类= parallelogram> < div class = text> < div class = shape>< / div>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<&/ div>< / div> / pre> 

I would like to justify/wrap my text inside a triangle to follow its border shape. I've made an example using a parallelogram, but the result isn't satisfying.

.parallelogram { 
    width: 200px; 
    padding: 20px; 
    -webkit-transform: skew(-30deg); 
    -moz-transform: skew(-30deg); 
    transform: skew(-30deg);
    background: #ccc;
    margin: 80px;
}

.parallelogram .text {
    width: 200px;
    -webkit-transform: skew(30deg); 
    -moz-transform: skew(30deg); 
    transform: skew(30deg);
    margin: 20px;
}

http://jsfiddle.net/HarrysNature/noqa6qLc/3/

Any idea?

解决方案

You can align the text to an oblique line by using shape-outside in combination with float.

How it works

• create a new element <div class="shape"></div> before your text

• create a thin parallelogram shape out of it with

  shape-outside: polygon(90% 0, 100% 0, 10% 100%, 0 100%);
  

• Let it float: left to make the text align to the right border of the shape
• adjust its height and width according to the angle of your transform: skew()

The good: Due to the polygon() method, you can create whatever shape you like and let text float around it. You can even make it responsive by setting relative units to its width and height.

The bad: Won't work in IE/Edge, see browser compatibility on caniuse and MDN.

For demonstration purposes, I added a background a clip-path to the shape, to see how it actually works. Of course you can remove those 3 rules:

.shape {
  width: 50px;
  height: 80px;
  -webkit-shape-outside: polygon(90% 0, 100% 0, 10% 100%, 0 100%);
  shape-outside: polygon(90% 0, 100% 0, 10% 100%, 0 100%);
  float: left;
  /* the following three lines are only for demonstration purposes */
  background: #444;
  -webkit-clip-path: polygon(90% 0, 100% 0, 10% 100%, 0 100%);
  clip-path: polygon(90% 0, 100% 0, 10% 100%, 0 100%);
}

.parallelogram {
  width: 300px;
  padding: 20px 20px 20px 0;
  -webkit-transform: skew(-30deg);
  -moz-transform: skew(-30deg);
  transform: skew(-30deg);
  background: #ccc;
  margin: 20px auto;
}

.parallelogram .text {
  width: 300px;
  -webkit-transform: skew(30deg);
  -moz-transform: skew(30deg);
  transform: skew(30deg);
}

<div class="parallelogram">
  <div class="text">
    <div class="shape"></div>
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  </div>
</div>

这篇关于在CSS形状内包装文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！