我知道 CSStransform: 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 肯定会更好。希望这对于有资格的个人解决问题来说是足够的信息。
谢谢你的时间！
我认为近似这一点的唯一方法是考虑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>
请注意，这些值与您使用的文本密切相关。您将需要大量的试验和错误才能获得最佳值（我怀疑是否存在适用于任何内容的通用解决方案......）
相关问题：如何使用边框半径将文本环绕在形状周围？