Erstellen Sie eine Pfeilleiste in HTML/CSS/JS

Question

Ich versuche, eine Fortschrittspfeil-Leiste zu erstellen, die ähnlich wie das Bild oben aussieht. Ich habe mit einer Kolumne angefangen (vier col-sm-4) und weiß nicht, wohin ich von dort gehen soll.

Answer 1

machte ich (inspiriert von this post) ein div mit der Form, die Sie wollen:

.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>

Haben Sie ein paar von ihnen überlappen, und Sie sollten gut zu gehen!

Answer 2

Eine Lösung mit: before und: after

.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

Sie können dies erreichen, indem CSS Pseudo-Elemente mit :before und after.

Überprüfen Sie den folgenden Code-Schnipsel:

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>