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

Question

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

如何保持边界框的角度

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

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

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

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

相关问题：如何用边框半径将文本环绕在形状周围？