Как получить линии потока через блок принятия решений в этой блок-схеме?

Question

Я создаю блок-схему в HTML и CSS, где я использую блок решений, из которого должны быть приняты два решения.Один идет ниже, но боковой поток, который снова перенаправляет на первое поле в блок-схеме после ответа «нет» в окне принятия решения.Итак, как добавить строку в блоке принятия решений в первый блок на блок-схеме?

#no1 {
  width:300px;
  height:60px;
  margin:auto;
}
#no1 a {
  height:60px;
}
#line1{
  font-size:0;
  width:1px;
  height:40px;
  color:#fff;
  background-color:#000;
  margin:auto;
}
.diamond {
  position: relative;
  height: 190px;
  width: 190px;
  line-height: 200px;
  text-align: center;
  font-size: 20px;
  margin: auto;
  margin-left: 0%;
  display: inline-block;
}
.diamond:before {
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 100%;
  background-color: #4286f4;  
  width: 100%;
  margin: auto;
  transform: rotateX(45deg) rotateZ(45deg);
  box-shadow: 0px 0px 12px gray;
  display: inline-block;
}
.diamond-inner {
  width: 180px;
  height: 180px;
  position: relative;
  margin: auto;
  font: 19px Helvetica, Arial, Times;
  font-weight:bold;
  color: white;
  margin: auto;
  margin-top: 60px;
  display: inline-block;
  white-space: normal;
}

<div id="flow_container">
  <div id="no1"><%= button_to A, usemap="#", :method => "get", 
   disabled: true, class: "flowchartButtonBlue" %></div>
  <div id="line1"></div>

  <div id="no1"><%= button_to B, usemap="#", :method => "get", 
   disabled: true, class: "flowchartButtonBlue" %></div>               
  <div id="line1"></div>

  <div id="no1"><%= button_to C, usemap="#", :method => "get", 
   disabled: true, class: "flowchartButtonBlue" %></div>
  <div id="line1"></div>

  <div class='diamond'>
    <div class="diamond-inner">
      <%= Decision %>
    </div>
  </div>
  <div id="line1"></div>            

  <div id="no1"><%= button_to D, usemap="#", :method => "get", \
   class: "flowchartButtonOval" %></div>
 </div>

Я пробовал много способов добавить строки в форме HTML и CSS, но они плохо выравниваются.

Я предоставляю весь необходимый код Iиспользуемый.Пожалуйста, попробуйте или просто поделитесь со мной некоторыми ссылками кода, где потоковые диаграммы в HTML и CSS создаются с помощью блока принятия решений с поточными линиями.

мне нужно почти так

Answer 1

Я использовал псевдо-классы, чтобы достичь этого.Надеюсь, поможет.спасибо

#no1 {
  width:300px;
  height:60px;
  margin:auto;
}
#no1 a {
  height:60px;
}
#line1{
  font-size:0;
  width:1px;
  height:40px;
  color:#fff;
  background-color:#000;
  margin:auto;
}
.diamond {
  position: relative;
  height: 190px;
  width: 190px;
  line-height: 200px;
  text-align: center;
  font-size: 20px;
  margin: auto;
  margin-left: 0%;
  display: inline-block;
  left: 50%;
    transform: translateX(-50%);
}
.diamond:before {
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 100%;
  background-color: #4286f4;  
  width: 100%;
  margin: auto;
  transform: rotateX(45deg) rotateZ(45deg);
  box-shadow: 0px 0px 12px gray;
  display: inline-block;
}
.diamond-inner {
  width: 180px;
  height: 180px;
  position: relative;
  margin: auto;
  font: 19px Helvetica, Arial, Times;
  font-weight:bold;
  color: white;
  margin: auto;
  margin-top: 60px;
  display: inline-block;
  white-space: normal;
}

.diamond-inner:after {
    content: "";
    position: absolute;
    height: 368px;
    width: 2px;
    top: -360px;
    background-color: black;
    left: -130px;}
    
.diamond-inner:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 87px;
    top: 6px;
    background-color: black;
    left: -130px;}
    
 .top:after {
    content: "";
    position: absolute;
    width: 55px;
    height: 2px;
    background-color: black;
    top: 29px;
    left: -70px;}
    
 .top:before {
        content: "";
    width: 0;
    height: 0;
    border-right: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-top: 10px solid transparent;
    border-left: 10px solid black;
    position: absolute;
top: 20px;
    left: -15px;
}

.top{
  position:relative;
}

<div id="flow_container">
  <div id="no1" class="top"><%= button_to A, usemap="#", :method => "get", 
   disabled: true, class: "flowchartButtonBlue" %></div>
  <div id="line1"></div>

  <div id="no1"><%= button_to B, usemap="#", :method => "get", 
   disabled: true, class: "flowchartButtonBlue" %></div>               
  <div id="line1"></div>

  <div id="no1"><%= button_to C, usemap="#", :method => "get", 
   disabled: true, class: "flowchartButtonBlue" %></div>
  <div id="line1"></div>

  <div class='diamond'>
    <div class="diamond-inner">
      <%= Decision %>
    </div>
  </div>
  <div id="line1"></div>            

  <div id="no1"><%= button_to D, usemap="#", :method => "get", \
   class: "flowchartButtonOval" %></div>
 </div>