CSS属性shape-outside似乎与值为vertical-rl的CSS属性write-mode不兼容。
例如,如果我尝试在三角形之后放置垂直文本,则该行不通:
.triangle {
width: 100%;
height: 12ex;
background-color: lightgray;
-webkit-shape-outside: polygon(0 0, 100% 0, 0 50%);
shape-outside: polygon(0 0, 100% 0, 0 50%);
float: left;
-webkit-clip-path: polygon(0 0, 100% 0, 0 50%);
clip-path: polygon(0 0, 100% 0, 0 50%);
}
p {
writing-mode: vertical-rl;
text-orientation: upright;
text-align: left;
}
<div class="triangle"></div>
<p>My very long text is so long that it has so many lines with wo many words in it! You cannot imagine how this text is long and how many lines it is made of, because there are so many. One cannot count them, that's totally impossible. Indeed this text is
so long. If you try to read it, this will probably last for the rest of your life.</p>
但是,如果我删除行writing-mode: vertical-rl;
,则文本将遵循三角形形状。但是,它将不再垂直写入!
我该如何管理? (我正在使用Firefox)