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>

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

1 个答案: