html - CSS:如何在线绘制带有标签的垂直线

Question

我有一个 CSS 作业。我的工作是绘制公交路线。

这是我的 html:

<div class="city-group">
  <div class="city-name-wrapper">
    <div class="city-name-line">
      <div class="city-name">City 1</div>
    </div>
  </div>

  <div class="stop-list">
    <div class="stop">Stop 1</div>
    <div class="stop">Stop 2</div>
    <div class="stop">Stop 3</div>
    <div class="stop">Stop 4</div>
    <div class="stop">Stop 5</div>
  </div>
</div>

<div class="city-group">
 <div class="city-name-wrapper">
    <div class="city-name-line">
      <div class="city-name">City 2</div>
    </div>
  </div>

  <div class="stop-list">
    <div class="stop">Stop 6</div>
    <div class="stop">Stop 7</div>
    <div class="stop">Stop 8</div>
  </div>
</div>

我必须将它设计成 The pircture below 的样式:

• 停靠点按城市分组。
• 每个组的左侧都有一个垂直括号。
• 在括号线上带有城市名称的旋转标签。

我试过这个 css，但我现在不知道如何让它工作......

这是 JsFiddle 的链接: https://jsfiddle.net/edm6qrt2/

我更喜欢使用现代 CSS，包括 flex 或 grid。我只需要 Google Chrome 的支持。

谢谢你的帮助!

Answer 1

一种方法是使用伪元素创建最左边的垂直线跨越城市群的高度。

此外，您可以通过 CSS 转换沿垂直线对齐 city-name，如下面的代码片段所示:

.city-group {
  position:relative;
  /* Create space to left of city group to 
  accomodate the city name and lines */
  padding-left:2rem;
}

/* Define pseudo element for vertical black
line to the left, spanning the vertical axis
of the city group */
.city-group:before {
  content:"";
  display:block;
  border-left:1px solid black;
  left:.75rem;
  top:1rem;
  bottom:1rem;
  position:absolute;
}

/* Transform the city name with translation and
rotation to place in line with line spanning left
of city group */
.city-name {
    transform: translate(-50%, 0%) rotate(-90deg) translateY(50%);
    position: absolute;
    left: 0;
    top: 50%;
    margin-top:-0.5em;
    border:2px solid orange;
    background:white;
    padding:0 1rem;
    z-index:1;
}

/* Create spacing above/below each stop */
.stop {
  padding:0.5rem 0;
  position:realtive;
}

/* Style pseudo elements for first and last
stop which are the horizontal line segments
for these stops. These line segments connect
with the vertical line defined above */
.stop:first-child:before,
.stop:last-child:before {
  content:"";
  display:block;
  border-top:1px solid black;
  left:.75rem;
  width:0.75rem;
  position:absolute;
}

/* Offset first line segement from top of
city group */
.stop:first-child:before {
  top:1rem;
}

/* Offset last line segement from bottom of
city group */
.stop:last-child:before {
  bottom:1rem;
}

<div class="city-group">
    <div class="city-name">
        City 1
    </div>
    <div class="stop-list">
        <div class="stop">Stop 1</div>
        <div class="stop">Stop 2</div>
        <div class="stop">Stop 3</div>
        <div class="stop">Stop 4</div>
        <div class="stop">Stop 5</div>
    </div>
</div>

<div class="city-group">
    <div class="city-name">
        Long City 2
    </div>
    <div class="stop-list">
        <div class="stop">Stop 6</div>
        <div class="stop">Stop 7</div>
        <div class="stop">Stop 8</div>
        <div class="stop">Stop 9</div>
        <div class="stop">Stop 10</div>
    </div>
</div>