在HTML/CSS/JS中创建一个箭头栏

Question

我正在尝试创建一个类似于上图所示的进度箭头栏。我从一列栏（四列col-sm-4）开始，不知道从哪里出发。

Answer 1

我做（由this post启发）带形状的div你想：

.container{ 
 
    width: 100%; 
 
    position: relative; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.v-div { 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 40px solid transparent; 
 
    border-top: 40px solid transparent; 
 
    border-left: 25px solid #f00; 
 
} 
 

 
.box{ 
 
    height: 80px; 
 
    width: 320px; 
 
    background: red; 
 
}

<div class="container"> 
 
     <div class="box"> 
 
     </div> 
 
     <div class="v-div"> 
 
     </div> 
 
    </div>

有几个他们的重叠，你应该是好去！

Answer 2

了一个解决方案：前和：后

.arrow { 
 
    font-size: 0; 
 
} 
 
.inner-arrow { 
 
\t width:210px; 
 
\t height:80px; 
 
    display: inline-block; 
 
\t background-color:green; 
 
\t text-align:center; 
 
\t font-size:20px; 
 
\t font-weight:bold; 
 
\t line-height:80px; 
 
    vertical-align: middle; 
 
} 
 
.arrow:before, 
 
.arrow:after { 
 
\t content:''; 
 
    display: inline-block; 
 
\t width:0; 
 
\t height:0; 
 
\t border:40px solid transparent; 
 
    vertical-align: middle; 
 
} 
 
.arrow:before { 
 
\t border-top-color: green; 
 
\t border-bottom-color: green; 
 
\t border-right-color: green; 
 
} 
 
.arrow:after { 
 
\t border-left-color: green; 
 
}

<div class="arrow"> 
 
    <div class="inner-arrow">Next step</div> 
 
</div>

Answer 3

您可以通过使用CSS伪元素:before和after实现这一目标。

检查下面的代码片段：

ul{ 
 
    padding:0; 
 
    list-style-type: none; 
 
    border:1px solid #ccc; 
 
} 
 
ul:before,ul:after{ 
 
    content:""; 
 
    display:table; 
 
} 
 
ul:after{ 
 
    clear:both; 
 
} 
 
ul li { 
 
    display: inline-block; 
 
    width: 25%; 
 
    float: left; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    font-size: 10px; 
 
    font-family: sans-serif; 
 
} 
 
ul li.active { 
 
    background: forestgreen; 
 
    color: #fff; 
 
} 
 
ul li a { 
 
    padding: 0 12px; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    position: relative; 
 
    display: block; 
 
} 
 
ul li.active a:before,ul li.active a:after{ 
 
    content: ""; 
 
    position: absolute; 
 
    border-style: solid; 
 
    border-color: transparent transparent transparent white; 
 
    border-width: 20px; 
 
    left: 0px; 
 
} 
 
ul li.active a:after{ 
 
    content: ""; 
 
    right: -40px; 
 
    left: auto; 
 
    border-color: transparent transparent transparent forestgreen; 
 
} 
 
ul li.active a { 
 
    padding-left: 30px; 
 
}

<ul> 
 
    <li><a>job post</a></li> 
 
    <li class="active"><a>invite</a></li> 
 
    <li><a>review</a></li> 
 
    <li><a>hire</a></li> 
 
</ul>