CSS将文本旋转n度，但不是边界框？

Question

我知道 CSS transform: rotate 属性，以及用于制作有角度的 div 元素的方法，但有一个非常重要的设计元素我在任何地方都找不到：

如何保持边界框的角度

当我创建有角度的 div 元素时，我使用旋转 n 度的包装元素，然后使用旋转的子元素（通常是 span）-n em> 度。不幸的是，这会导致子元素有自己的矩形边界，独立于其父元素。

下图是一个非常基本的示例，每个人似乎都可以接受，其中子元素的文本位于无角矩形内，但这不是我想要的：

.parent {
    width: 200px;
    height: 200px;
    transform: rotate(30deg);
    background-color: blue; /* for clarity in img */
}
.child {
    display: inline-block;
    transform: rotate(-30deg);
    background-color: rgba(250, 80, 80, 0.4); /* for clarity in img */
}

值得注意的是子元素必须有display: inline-block才能真正旋转。

这大概就是我要找的东西：

                                  Some
                            text goes here
                       and automatically just-
                  ifies to the shape of the parent
              element which in this case hap-
         pens to be a rectangle. Here's
            more text to show the
                full shape..
                     --

我尝试过使用text-orientation、不同的位置值组合以及transform 的其他技巧，但我无法让文本表现得好像父元素是它的边界；相反，它只是创建自己的！

我可以使用 JavaScript 解决方案，但纯 CSS 肯定会很好。希望这些信息足以让合格的个人解决问题。

感谢您的宝贵时间！

Answer 1

我认为近似此值的唯一方法是考虑shape-outside，但要获得正确的值会非常棘手。

下图。您所要做的就是更新宽度/高度值来控制整体形状：

.container {
  display: flex;
  width: 400px;
  margin: 20px auto;
  text-align: justify;
}

.box>div {
  display: inline;
}

.box>div:before,
.box>div:after {
  content: "";
  float: left;
  shape-outside: linear-gradient(var(--d), #fff 49%, transparent 50%);
  background: linear-gradient(var(--d), transparent 49.5%, red 50% 51%, transparent 51.5%);
}

.box>div:after {
  float: right;
}

.box>div:first-child:before {
  --d: to bottom right;
  width: 60%;
  height: 120%;
}

.box>div:first-child:after {
  --d: to bottom left;
  width: 40%;
  height: 140%;
}

.box>div:last-child:before {
  --d: to top right;
  width: 40%;
  height: 140%;
}

.box>div:last-child:after {
  --d: to top left;
  width: 60%;
  height: 120%;
}

<div class="container">
  <div class="box">
    <div></div>
    <div></div>
    Lor em ipsum dolor sit amet, consectetur adipiscing elit. Sed id dolor nisl. Curabitur efficitur imperdiet dui quis molestie. Sed interdum elit ut sem pharetra lacinia. Proin porta auctor risus ac tempus. Etiam mollis malesuada diam at ultrices. Cras
    vel congue nisl, non auctor lorem. Nam ac lobortis nulla.
  </div>
</div>

我们可以添加更多的 CSS 变量以使其更灵活：

.container {
  --w: 60%;
  --h1: 110%;
  --h2: 130%;
  display: inline-flex;
  width: 300px;
  margin: 20px auto 200px;
  text-align: justify;
}

.box>div {
  display: inline;
}

.box>div:before,
.box>div:after {
  content: "";
  float: left;
  shape-outside: linear-gradient(var(--d), #fff 49%, transparent 50%);
  background: linear-gradient(var(--d), transparent 49.5%, red 50% 51%, transparent 51.5%);
}

.box>div:after {
  float: right;
}

.box>div:first-child:before,
.box>div:last-child:after {
  --d: to bottom right;
  width: var(--w);
  height: var(--h1);
}

.box>div:first-child:after,
.box>div:last-child:before {
  --d: to bottom left;
  width: calc(100% - var(--w));
  height: var(--h2);
}

.box>div:last-child:before {
  --d: to top right;
}

.box>div:last-child:after {
  --d: to top left;
}

<div class="container">
  <div class="box">
    <div></div>
    <div></div>
    Lor em ipsum dolor sit amet, consectetur adipiscing elit. Sed id dolor nisl. Curabitur efficitur imperdiet dui quis molestie. Sed interdum elit ut sem pharetra lacinia. Proin porta auctor risus ac tempus. Etiam mollis malesuada diam at ultrices. Cras
    vel congue nisl, non auctor lorem. Nam ac lobortis nulla.
  </div>
</div>

<div class="container" style="--w:50%;--h1:120%;--h2:120%;">
  <div class="box">
    <div></div>
    <div></div>
    Lor em ipsum dolor sit amet, consectetur adipiscing elit. Sed id dolor nisl. Curabitur efficitur imperdiet dui quis molestie. Sed interdum elit ut sem pharetra lacinia. Proin porta auctor risus ac tempus. Etiam mollis malesuada diam at ultrices. Cras
    vel congue nisl, non auctor lorem. Nam ac lobortis nulla.
  </div>
</div>

<div class="container" style="--w:30%;--h1:120%;--h2:120%;">
  <div class="box">
    <div></div>
    <div></div>
    Lor em ipsum dolor sit amet, consectetur adipiscing elit. Sed id dolor nisl. Curabitur efficitur imperdiet dui quis molestie. Sed interdum elit ut sem pharetra lacinia. Proin porta auctor risus ac tempus. Etiam mollis malesuada diam at ultrices. Cras
    vel congue nisl, non auctor lorem. Nam ac lobortis nulla.
  </div>
</div>

请注意，这些值与您使用的文本密切相关。您将需要大量的反复试验才能获得最佳价值（我怀疑是否有适用于任何内容的通用解决方案......）

相关问题：How to wrap text around a shape with border-radius?

Answer 2

我认为实现这一点的唯一方法是结合skewx 和单词排序，请参见下面的 sn-p。

#myDiv {
  transform: skewX(-50deg);
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  padding: 0px 10px;
}
#myDiv span {
  transform: skewX(50deg);
  display: inline-block;
}

<div id="myDiv">
<span>This</span> <span>amazing</span> <span>text</span> <span>will</span> <span>fit</span> <span>inside</span> <span>your</span> <span>container</span> <span>being</span> <span>inclined</span> <span>!</span>.
</div>

单词分离是必要的，因为每个单词都必须一个一个地不倾斜，而不是整个子块（如果有的话）。