如何通过这个流程图中的决策框获得流线？

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表单中添加行，但他们没有对准好。

我提供了所有我用了所需的代码。请尝试或者只是分享我的代码一些链接，其中在HTML和CSS的流程图与决策框创建了流线。

i need almost like this

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>