CSS：如何绘制带有标签线的垂直线

JudahA 发表于 Dev

犹大

我有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>

我必须将其样式设置为下面的装饰：

站点按城市分组。
每个组的左侧都有一个垂直括号。
带有城市名称的旋转标签在括号中。

我尝试了这个CSS，但是现在我不知道如何使它工作了...

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

我敢于使用现代CSS，包括flex或grid。我只需要Google Chrome支持。

Thenk的任何帮助！

达克里·丹尼

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

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

.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。