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

Question

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

如何使边界框保持一定角度

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

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

.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 肯定会更好。希望这些信息足以让合格的 dividual 解决问题。

感谢您的宝贵时间！

Answer 1

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

下图。您所要做的就是更新 width/height 值以控制整体形状：

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

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

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

CSS rotate text by n degress, but not the boundary box?

html

css

css-transforms

如何使边界框保持一定角度