CSS中的进度条

Question

CSS中的进度条

12

我正在尝试使用HTML/CSS/jQuery构建这个设计好的流程/进度图表 >

，但我无法想出如何使各个堆叠行包括向下箭头，然后根据前一行的方向包括一个反向箭头，步骤从右到左，然后从左到右，再从右到左等等...

所有这些都需要响应式工作... 我已经按照代码示例在传统方式下实现了它。

function sortFlowChartArrows () {

/* clear prev arrow */

$('.arrow-right').each(function() {
$(this).remove();
});

$('.arrow-down').each(function() {
$(this).remove();
});


var windowWidthSize = $(window).width();

if (windowWidthSize >= 450) {

$('.projectStatusWrapper li:not(:last-child)').each(function() {
 $(this).after("<div class='arrow-right'></div>")
 
});

}

if (windowWidthSize <= 449) {

$('.projectStatusWrapper li:not(:last-child)').each(function() {
 $(this).after("<div class='arrow-down'></div>")
 
});

}

}

sortFlowChartArrows();

$(window).load(function() { sortFlowChartArrows(); });
$(window).resize(function() { sortFlowChartArrows(); });



/* PROJECT FLOW CHART - MAKE ALL LIS SAME HEIGHT */

function makeallflowchartLIsSameHeight () {

/* clear value */
$('.projectStatusWrapper li span').each(function() {
 $(this).css("height","")
})

var flowchartLIHeight = Math.max.apply( null, $(".projectStatusWrapper li").map( function () {
return $( this ).height();
}).get() );

console.log(flowchartLIHeight)

$('.projectStatusWrapper li span').each(function() {
 $(this).css("height",flowchartLIHeight+"px")
});
 
}


makeallflowchartLIsSameHeight();

$(window).load(function() { makeallflowchartLIsSameHeight(); });
$(window).resize(function() { makeallflowchartLIsSameHeight(); });

.projectStatusWrapper {
width: 100%;
float: left; 
}
.projectStatusWrapper ul {
margin: 0;
padding: 0;
}
.projectStatusWrapper li {
display: inline-table;
padding: 0;
margin: 0;
list-style: none;
border: 2px solid #74b4df; 


-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
margin: 0.5%;
font-weight: 400;
font-family: 'FFMarkWebProHeavy', Helvetica, Arial;

width: 17%;
vertical-align: middle;
text-align: center;
}
.projectStatusWrapper li span {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 15px 20px;
}
.projectStatusWrapper li.complete {
background-color: #74b4df;
color: #fff;
}
.arrow-right {
width: 0; 
height: 0; 
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
  
border-left: 15px solid #74b4df;
display: inline-block;
vertical-align: middle;
}
.arrow-left {
width: 0; 
height: 0; 
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
  
border-right: 15px solid #74b4df;
display: inline-block;
vertical-align: middle;
float: right;
}
.arrow-down {
width: 0; 
height: 0; 
border-left: 15px solid transparent;
border-right: 15px solid transparent;
  
border-top: 15px solid #74b4df;
display: inline-block;
vertical-align: middle;
text-align:center;
  
position: relative;
left: 43.5%;
margin-top: 5px;
margin-bottom: 5px;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="projectStatusWrapper">

<ul>
<li class="complete">Step 1</li>
<li class="complete">Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
<li>Step 6</li>
<li>Step 7</li>
<li>Step 8</li>
<li>Step 9</li>
<li>Step 10</li>
</ul>

</div>

有什么想法可以使其按照设计要求工作吗？

- dubbs

你有什么限制吗？例如，你能否使用 flexbox 或 CSS 列布局？（我不确定它们是否有用，但如果你能或不能使用它们，让人们知道会很好。） - T.J. Crowder

没有限制 - 只需要一个好的/智能的标记解决方案，可以以响应式方式反映设计的解决方案。尽管如此，我希望保持尽可能简单。 - dubbs

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Theodore K. · Accepted Answer

我有一个非常简单的想法，认为 如果我们接受固定数量的列 实际上是可行的。基本上，我将箭头放在 :after 中，并使用 nth-child(6n+...) 来定义箭头的情况。当然需要一些微调，无论如何，这里是 Codepen 演示

.projectStatusWrapper {
  width: 100%;
  float: left;
}

.projectStatusWrapper ul {
  margin: 0;
  padding: 0;
}

.projectStatusWrapper li {
  box-sizing: border-box;
  width: 30.5%;
  display: inline-block;
  list-style: none;
  border: 2px solid #74b4df;
  padding: 1%;
  margin: 1%;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  font-weight: 400;
  font-family: 'FFMarkWebProHeavy', Helvetica, Arial;
  position: relative;
  vertical-align: middle;
}

.projectStatusWrapper li.complete {
  background-color: #74b4df;
  color: #fff;
}

.projectStatusWrapper li:after {
  content: '';
  position: absolute;
  z-index: 1;
}

.projectStatusWrapper li:nth-child(6n+4),
.projectStatusWrapper li:nth-child(6n+5),
.projectStatusWrapper li:nth-child(6n+6) {
  float: right;
}

.projectStatusWrapper li:nth-child(6n+1):after,
.projectStatusWrapper li:nth-child(6n+2):after {
  top: 50%;
  right: -19px;
  transform: translateY(-50%);
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid tomato;
}

.projectStatusWrapper li:nth-child(6n+3):after,
.projectStatusWrapper li:nth-child(6n+6):after {
  left: 50%;
  bottom: -23px;
  transform: translateY(-50%);
  border-right: 15px solid transparent;
  border-top: 15px solid tomato;
  border-left: 15px solid transparent;
}

.projectStatusWrapper li:nth-child(6n+4):after,
.projectStatusWrapper li:nth-child(6n+5):after {
  top: 50%;
  left: -19px;
  transform: translateY(-50%);
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid tomato;
}

.projectStatusWrapper li:last-child:after {
  display: none;
}

<div class="projectStatusWrapper">
  <ul>
    <li class="complete">Step 1</li>
    <li class="complete">Step 2</li>
    <li>Step 3</li>
    <li>Step 4</li>
    <li>Step 5</li>
    <li>Step 6</li>
    <li>Step 7</li>
    <li>Step 8</li>
    <li>Step 9</li>
    <li>Step 10</li>
  </ul>
</div>