CSS实现一个简单的拓扑图

  有时候会需要实现简单的拓扑图。如果是简单的一对多的关系，可以使用CSS实现。比如需要实现以下效果：

效果图.jpg

具体思路是：

1. 先把所有节点写出来
2. 通过给节点加absolute布局的div来加上连接线
3. 通过给节点加absolute布局的div来加上箭头

完整代码如下(vue文件)：

<template>
  <div class="home">
    <div class="flex-column left">
      <div class="node left-node" v-for="(item, index) in leftList" :key="'left' + index">{{item}}</div>
    </div>
    <div class="flex-column center">
      <div class="node center-node">
        {{center}}
        <div class="arrow"></div>
      </div>
    </div>
    <div class="flex-column right">
      <div class="node right-node" v-for="(item, index) in rightList" :key="'right' + index">
        {{item}}
        <div class="arrow"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      leftList:['left1', 'left2', 'left3'],
      center: 'center',
      rightList: ['right1', 'right2', 'right3', 'right4']
    };
  }
};
</script>
<style lang="scss" scoped>
.home {
  display: flex;
  justify-content: flex-start;
  .left {
    .left-node {
      position: relative;
      &:before {
        content: '';
        position: absolute;
        top: 25px;
        left: 160px;
        width: 60px;
        height: 2px;
        background: #3385ff;
      }
      &:after {
        content: '';
        position: absolute;
        top: 25px;
        right: -60px;
        width: 2px;
        height: 100px;
        background: #3385ff;
      }
      &:last-of-type {
        &:after {
          display: none;
        }
      }
    }
  }
  .center {
    margin-left: 120px;
    .center-node {
      position: relative;
      &:before {
        content: '';
        position: absolute;
        top: 25px;
        right: 160px;
        width: 60px;
        height: 2px;
        background: #3385ff;
      }
      &:after {
        content: '';
        position: absolute;
        top: 25px;
        left: 160px;
        width: 60px;
        height: 2px;
        background: #3385ff;
      }
    }
  }
  .right {
    margin-left: 120px;
    .right-node {
      position: relative;
      &:before {
        content: '';
        position: absolute;
        top: 25px;
        right: 160px;
        width: 60px;
        height: 2px;
        background: #3385ff;
      }
      &:after {
        content: '';
        position: absolute;
        top: 25px;
        left: -60px;
        width: 2px;
        height: 100px;
        background: #3385ff;
      }
      &:last-of-type {
        &:after {
          display: none;
        }
      }
    }
  }
  // 箭头(小三角形)公共样式
  .arrow {
    position: absolute;
    top: 18px;
    right: 150px;
    width: 0;
    height: 0;
    border: 8px solid #3385ff;
    border-color: transparent transparent transparent #3385ff;
  }
  // flex-column公共样式
  .flex-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  // 节点公公样式
  .node {
    margin-top: 50px;
    width: 160px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    background: #3385ff;
  }
}
</style>