html - 如何使用 css 删除不需要的 html 流程图线

Question

我有一个使用 HTML 和 css 完成的流程图，我使用 codepen 中的代码来创建流程图，css 如下所示:

.orgchart p {
  display: inline-block;
  background-color: DarkTurquoise;
  padding: 8px;
  border-radius: 10px;
  color: white;
  text-align: center;
}

.orgchart p:hover {
  background-color: MediumSeaGreen;
  cursor: pointer;
}

.orgchart p .collapse {
  position: absolute;
  bottom: -15px;
  left: calc(50% - 6px);
  color: #EEEEEE;
  background-color: #CCCCCC;
  border-radius: 6px;
  height: 12px;
  width: 12px;
  font-size: 12px;
  text-align: center;
}


/*chart nodes*/

.orgchart {
  display: inline-block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.orgchart,
.orgchart ul {
  padding: 0;
  margin: 0;
}


/*align children horizontally using CSS flex*/

.orgchart ul {
  display: flex;
}


/*align nodecontent and children list vertically*/

.orgchart li {
  display: flex;
  flex-direction: column;
  position: relative;
}


/*arrange the nodecontent centered above the children list*/

.orgchart p {
  align-self: center;
  position: relative;
  margin: 20px 5px;
}

.orgchart .collapsed>ul {
  display: none;
}


/*connections*/

.orgchart li::before,
.orgchart p::after,
.orgchart p::before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  z-index: -1;
  border: 0px solid #CCCCCC;
}

.orgchart li:not(:only-child)::before {
  border-top-width: 2px;
  width: 100%;
  height: 20px;
  top: 0px;
}

.orgchart li:first-child::before {
  width: calc(50% + 1px);
  right: 0;
  border-left-width: 2px;
  border-top-left-radius: 7px;
}

.orgchart li:last-child::before {
  width: calc(50% + 1px);
  border-right-width: 2px;
  border-top-right-radius: 7px;
}

.orgchart p::after,
.orgchart p::before {
  border-left-width: 2px;
  width: 2px;
  height: 20px;
  left: calc(50% - 1px);
}

.orgchart p::before {
  top: -20px;
}

.orgchart p::after {
  bottom: -20px;
}

.orgchart li:first-child:not(:only-child)>p::before,
.orgchart li:last-child:not(:only-child)>p::before {
  border-left-width: 0px;
}

.orgchart .leaf>p::after,
.orgchart .root>p::before,
.orgchart .collapsed>p::after {
  display: none;
}


/*vertical nodes*/

.orgchart li.vertical>ul {
  flex-direction: column;
  align-items: flex-start;
  margin: 0 5px 20px;
  position: relative;
}

.orgchart li.vertical>ul>li>p {
  margin: 20px 0 0 10px;
}


/*
ul.orgchart, .orgchart ul {
    border: 5px solid DarkBlue;
}

.orgchart li {
    border: 5px solid Lime;
}

.orgchart p {
    outline: 5px solid DeepPink;
}*/


/*vertical connectors*/

.orgchart li.vertical>ul::before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: -2px;
  left: 10px;
  height: 10px;
  width: calc(50% - 19px);
  border-top: 2px solid #CCCCCC;
}

.orgchart li.vertical>p::after {
  border-width: 0 2px 2px 0;
  border-bottom-right-radius: 7px;
  width: 10px;
  left: auto;
  right: calc(50% - 1px);
}

.orgchart li.vertical>ul>li::before {
  border-width: 0 0 0 2px;
  left: 0px;
  height: 100%;
  width: 10px;
  border-radius: 0;
}

.orgchart li.vertical>ul>li:first-child::before {
  top: -2px;
  height: calc(100% + 2px);
  border-top-width: 2px;
  border-top-left-radius: 7px;
}

.orgchart li.vertical>ul>li:last-child::before {
  height: calc(50% + 6px);
  border-bottom-width: 2px;
  border-bottom-left-radius: 7px;
}

.orgchart li.vertical>ul>li>p::before {
  height: 2px;
  width: 8px;
  top: calc(50% - 1px);
  left: -8px;
  border-width: 2px 0 0 0;
}

.orgchart li.vertical>ul>li:last-child>p::before {
  display: none;
}

.vertical p {
  font-size: 7.5px !important;
}

.leaf p {
  font-size: 7.5px !important;
}

#toffymate a {
  color: white !important;
}

这是我的完整代码:enter link description here

问题是我在流程图中得到不需要的线，如下图我用黄色标记:

谁能告诉我如何删除它，在此先感谢

Answer 1

您可以使用这些 css 更改您的图表:

首先，删除不需要的行

.orgchart > li > ul > li:nth-child(4) > ul:before {content:none;}

然后移动你需要的圆 Angular 向左的线，使其位于顶线之上

.orgchart > li > ul > li:nth-child(4):before {right: 116px;}

最后更改垂直主线使其不显示任何顶 Angular 并保持在正确位置

.orgchart > li > ul > li:nth-child(4) > ul > li:first-child:before {
    top: 20px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-top: 0;
  }

现在是这样的:JSFIDDLE