将文本包裹在 CSS 形状中

Question

我想将我的文本对齐/包裹在三角形内以遵循其边框形状。我用平行四边形做了一个例子，但结果并不令人满意。

.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/

任何的想法？

Answer 1

通过shape-outside与 结合使用，可以将文本与斜线对齐float。

这个怎么运作

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

• 用它创建一个薄的平行四边形形状

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

• 让它float: left使文本与形状的右边框对齐
• 调整它height并width根据您的角度transform: skew()

好处：由于该polygon()方法，您可以创建您喜欢的任何形状，并让文本在其周围浮动。您甚至可以通过为其width和设置相对单位来使其具有响应性height。

不好的地方：在 IE/Edge 中不起作用，请参阅caniuse和MDN上的浏览器兼容性。

出于演示目的，我在形状中添加了一个backgrounda clip-path，以查看它的实际工作原理。当然，您可以删除这 3 条规则：

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

.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);
}

Answer 2

您可以在线拆分文本并将每个文本换行为 div：

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

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


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