如何强制（旋转）垂直弹性框中的元素不重叠？

Question

我正在尝试在页面的左上角放置一些旋转的文本，并在所述文本的顶部添加一行，like so。

我尝试通过使用垂直弹性框来做到这一点。我假设通过将线绘制为 <b>div</b> ，然后添加 <b>h3</b> 元素，间距将由弹性框处理。供参考，这里是代码，

<div style="display: flex; 
            flex-direction: column;
            align-items: center;
            justify-content:flex-start;
            margin-right: 90%; 
            height: 100vw;
            width: auto;
            ">

            <hr style="transform: rotate(-90deg);
                       width: 9%;
                       position: fixed;">

            <h3 style="font-family: Italianno; 
                       font-size: 170% ;
                       transform: rotate(-90deg);
                       margin-top: 80%;" 
                       id="fancy-logo">

                Sorority
            </h3>

</div>

不幸的是，当我调整页面大小时，顶部的行最终会与单词重叠？关于如何解决这个问题的任何建议？

Answer 1

writing-mode 确实是一个很好的开始方式，而 flex 在这里也非常有用，可以绘制那条视觉线，但从一个伪而不是 hr

writing-mode 值将是 sideways-rl，但并非在任何地方都有效，此处可以使用 transform 来镜像 h3 本身。

例子

h3 {
  writing-mode: vertical-lr;
  display: flex;
  padding: 0.5em 0 0;
  transform: scale(-1, -1);
  background:lightgray
}
h3::after {
  content: "";
  flex: 1;
  border: outset 2px;
  margin: 0.5em auto 0;
}


body {margin:0;}
div {
  min-height: 80vh;/* if not enough content to stretch it */
  display: flex;
}
div[class] {margin:auto;min-height:auto;display:block;}

<div>
  <h3>
    Sorority
  </h3>
  <div class> <!-- extra markup for demo *-->
    <p>looking for more content to set here aside, but not rotated ?</p>
    <p>inside a flex box, this div can be aligned</p>
  </div>
</div>

这是来自similar question 的codepen

Answer 2

尝试使用:before 伪类创建行并使用writing-mode 正确获取文本。

div {
  display: inline-block;
}

div:before {
  content: '';
  width: 1px;
  height: 100px;
  background: #000;
  display: block;
  margin: 0 auto;
}

h3 {
  margin: 0;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  padding-bottom: 1em;
}

<div>
  <h3>
    Sorority
  </h3>
</div>