我有两个兄弟姐妹。其中一个占据父级宽度的 70%，并向左浮动。它有一个clip-path创建不规则多边形。同级 div 的宽度为父级 div 的 100%。我已经放了一个shape-outside浮动 div 上的属性允许同级中的文本以遵循多边形对角线的方式换行。
我无法解决的问题是非浮动同级中的文本是动态的，可以是单行或多行。我想确保文本在非浮动 div 中保持垂直居中并遵循shape-outside line.
Flex、网格和表格似乎破坏了文本跟随内容的能力shape-outside line. 这是一个代码笔的链接，其中包含当前设置的内容。
main {
height: 25rem;
width: 95vw;
margin: auto;
}
#main-left {
background-image: url('https://drive.google.com/uc?id=1NeUyxUgp7I56mTpmzYIUXbQilRnd0dAK');
background-size: cover;
background-position: center;
width: 75%;
height: 100%;
float: left;
-webkit-clip-path: polygon(0 0, 95% 0, 50% 100%, 0% 100%);
clip-path: polygon(0 0, 95% 0, 50% 100%, 0% 100%);
shape-outside: polygon(0 0, 97% 0, 50% 100%, 0% 100%);
}
#main-right {
width: 100%;
height: 100%;
}<main>
<div id="main-left"></div>
<div id="main-right">
<p>Play with the angles. This is unplanned it really just happens. A fan brush is a fantastic piece of equipment. Use it. Make friends with it. We have no limits to our world. We're only limited by our imagination. The very fact that you're aware of
suffering is enough reason to be overjoyed that you're alive and can experience it. We don't have anything but happy trees here. This painting comes right out of your heart. Any little thing can be your friend if you let it be. Learn when to stop.
You can create beautiful things - but you have to see them in your mind first. There's not a thing in the world wrong with washing your brush. These little son of a guns hide in your brush and you just have to push them out.</p>
</div>
</main>我们可以考虑使用技巧position:absolute但与relative因为绝对不起作用，而相对在这里会做同样的事情，因为您的元素已经放置在顶部，所以在使用时top:50%;transform:translateY(-50%)我们将有一个部分垂直居中，如下所示：
main {
height: 25rem;
margin: auto;
}
#main-left {
background-image: url('https://drive.google.com/uc?id=1NeUyxUgp7I56mTpmzYIUXbQilRnd0dAK');
background-size: cover;
background-position: center;
width: 75%;
height: 100%;
float: left;
-webkit-clip-path: polygon(0 0, 95% 0, 50% 100%, 0% 100%);
clip-path: polygon(0 0, 95% 0, 50% 100%, 0% 100%);
shape-outside: polygon(0 0, 97% 0, 50% 100%, 0% 100%);
}
#main-right {
width: 100%;
height: 100%;
}
p {
position:relative;
top:50%;
transform:translateY(-50%);
}<main>
<div id="main-left"></div>
<div id="main-right">
<p>Play with the angles. This is unplanned it really just happens. A fan brush is a fantastic piece of equipment. Use it. Make friends with it. We have no limits to our world. We're only limited by our imagination. The very fact that you're aware of
suffering is enough reason to be overjoyed that you're alive and can experience it. We don't have anything but happy trees here. This painting comes right out of your heart. Any little thing can be your friend if you let it be. Learn when to stop.
You can create beautiful things - but you have to see them in your mind first. There's not a thing in the world wrong with washing your brush. These little son of a guns hide in your brush and you just have to push them out.</p>
</div>
</main>现在的问题是翻译将创建一个偏移量，您需要使用另一个翻译来纠正该偏移量。这是一个说明，可以更好地理解如何解决这个问题以及我们需要应用什么翻译：
红色箭头是我们所做的翻译，由top:50%;transform:translateY(-50%)。 top 相对于容器的高度（25rem）并转换为元素的高度，这样我们就可以得到12.5rem - h/2
如果我们考虑蓝线定义的角度，我们将得到tan(angle) = G/R where G是我们正在寻找的距离R是我们已经定义的。
对于相同的角度，我们也有tan(angle) = W / H where H是容器高度，W 是被移除的底部部分clip-path这是50%宽度的（少一点，但让我们变得简单）所以我们将拥有整个屏幕宽度的 50% 或 75%。我们可以将其近似为37.5vw thus tan(angle) = 37.5vw / 25rem.
So G = (37.5vw/25rem)*(12.5rem - h/2) = 18.75vw - (18.75vw/25rem)*h = 18.75vw*(1 - h/25rem).
很明显，我们无法使用纯 CSS 来表示该值，因此您需要考虑 JS 来动态更新该值translateX为了纠正对齐：
// to make it easy we will consider font-size: 16px thus 25rem = 400px
var p= document.querySelector('p');
var h = (p.offsetHeight/400 - 1); /*we need a negative translation*/
var translateX = "calc(18.75vw * "+h+")";
p.style.transform="translate("+translateX+",-50%)";
window.onresize = function(event) {
h = (p.offsetHeight/400 - 1);
translateX = "calc(18.75vw * "+h+")";
p.style.transform="translate("+translateX+",-50%)";
};main {
height: 25rem;
margin: auto;
}
#main-left {
background-image: url('https://drive.google.com/uc?id=1NeUyxUgp7I56mTpmzYIUXbQilRnd0dAK');
background-size: cover;
background-position: center;
width: 75%;
height: 100%;
float: left;
-webkit-clip-path: polygon(0 0, 95% 0, 50% 100%, 0% 100%);
clip-path: polygon(0 0, 95% 0, 50% 100%, 0% 100%);
shape-outside: polygon(0 0, 97% 0, 50% 100%, 0% 100%);
}
#main-right {
width: 100%;
height: 100%;
}
p {
position:relative;
top:50%;
transform:translateY(-50%);
}<main>
<div id="main-left"></div>
<div id="main-right">
<p>Play with the angles. This is unplanned it really just happens. A fan brush is a fantastic piece of equipment. Use it. Make friends with it. We have no limits to our world. We're only limited by our imagination. The very fact that you're aware of
suffering is enough reason to be overjoyed that you're alive and can experience it. We don't have anything but happy trees here. This painting comes right out of your heart. Any little thing can be your friend if you let it be. Learn when to stop.
You can create beautiful things - but you have to see them in your mind first. There's not a thing in the world wrong with washing your brush. These little son of a guns hide in your brush and you just have to push them out.</p>
</div>
</main>