Question

我正在尝试使用CSS Shapes将文本调整为具有固定倾斜度的三角形，并且需要该三角形以适应文本长度。如果三角形的容器不够宽，则应变成梯形。同样，它也不应大于所需的大小。但是，我一直在产生溢出或不必要的空白。

desired result with short text desired result with long text

正如在其他地方所建议的那样，我使用浮动元素将文本推入形状。此外，我在父级上设置了display:grid，以便访问三角形的高度，将第二个切口置于底部。对于此处的代码，我用框替换了文本，以使间隙/溢出更明显。另外，还没有应用clip-path。

首先尝试使用单个Float：

<div class="container">
  <div class="triangle">
    <div class="cutter"></div>
    <div class="content">      
      <span class="item"></span><span class="item"></span>[...]
    </div>
  </div>
</div>

html{
  --width: 40em;
  --incline: 0.2;
}
.container{
  border: 1px solid black;
  width: var(--width);
  display:grid;
}
.triangle{

}
.cutter{
  float: right;
  width: 100%;
  height: 100%;
  background-color: #0f08;
  shape-outside: var(--shape);
  clip-path: var(--shape);
  --shape: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%,
    100% calc(100% - var(--incline) * var(--width)),
    100% calc(var(--incline) * var(--width)));
}

.item{
  display: inline-block;
  width: 10em;
  height: 5em;
  background-color: beige;
  border: 1px solid red;
}

CodePen：short content; long content

此版本可靠地产生溢出，可能是因为确定元素/网格单元的高度时，将浮点数的100％高度假定为零。

因此，在第二个版本中，我将切刀分为三个部分：顶部和底部的三角形切口，中间的一个将三角形推开。

<div class="container">
  <div class="triangle">
    <div class="top cutter"></div>
    <div class="middle cutter"></div>
    <div class="bottom cutter"></div>
    <div class="content">
      <span class="item"></span><span class="item"></span>[...
    </div>
  </div>
</div>

html{
  --width: 40em;
  --incline: 0.2;
}
.container{/*same as above*/}
.cutter{
  float: right;
  width: 100%;
}
.cutter.top{
  height: calc(var(--incline)*var(--width));
  shape-outside:polygon(0% 0%, 100% 0%, 100% 100%);
  clip-path:polygon(0% 0%, 100% 0%, 100% 100%);
  background-color: #0f08;
}
.cutter.middle{
  height: calc(100% - 2 * var(--incline) * var(--width));
  shape-outside: polygon(100% 0%, 100% 100%);
  background-color: #0ff4;
}
.cutter.bottom{
  height: calc(var(--incline) * var(--width));
  background-color: #00f8;
  shape-outside: polygon(100% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
}
.item{/*same as above*/}

CodePen

在这里，间隔符似乎在确定高度时被忽略，因此在该阶段，底部三角形相交太早，即与文本错误的段落相交。在我的测试中，这倾向于产生多余的空格，但是，例如在确定高度时，底部三角形最终出现在两个段落之间的间隙中，将会发生溢出。

此外，这种方法不允许切刀相交，因此会强制使用最小尺寸。

由于我担心唯一安全的纯CSS解决方案只能切开顶部，因此我尝试了一些JavaScript：天真版本，增加/减少三角形的高度，直到碰到溢出之间的边缘为止，但是没有溢出的方法，但这是严重影响浏览器性能（即显示“此选项卡正在降低浏览器速度”消息）。但是，将三角形style.height设置为其scrollHeight会产生多余的空格，尤其是在最后一个框/单词之前只需要再增加一个像素就能容纳空白的情况下。

我应该尝试使用CSS的任何提示吗？还是有关更智能的JS算法的一些建议？

顺便说一句，我认为该解决方案仅适用于最新版本的Chrome和Firefox。

CSS形状：三角形自动适应其内部文本的大小

0 个答案: