I am trying to create a progress arrow-bar which looks like similar to the image above. I started with a bar of columns (four col-sm-4) and do not know where to go from there.

I am trying to create a progress arrow-bar which looks like similar to the image above. I started with a bar of columns (four col-sm-4) and do not know where to go from there.

• javascript
• html
• css

Share Improve this question Follow edited May 25, 2017 at 20:21 jkeys 43133 silver badges1010 bronze badges asked May 25, 2017 at 20:13 Dukakus17Dukakus17 1,24944 gold badges1818 silver badges3232 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

I made (inspired by this post) a div with the shape you want:

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

Have a few of them overlap and you should be good to go!

A solution with :before and :after

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

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

For someone else stumbling onto this post and looking for something slighly different.

This is another solution that looks good

Using: transform, border and box-shadow - along with a little creative positioning and size adjustments

.locbar {
  border-radius:5px;
  border:1px solid #ccc;
  background-color:#fff;
  height:35px;
  padding-left:10px;
}

.item {
  float:left;
  display:inline-block;
  line-height:35px;
  padding-left:5px;
  font-family:Arial;
}

.arrow {
  float:left;
  position:relative;
  transform:rotate(-45deg) skew(-15deg, -15deg);
  display:inline-block;
  box-shadow:1px 1px 3px 0px rgba(0,0,0,0.15);
  border-bottom:1px solid #ccc;
  border-right:1px solid #ccc;
  width:19px;
  height:19px;
  top:8px;
  left:-8px;
}

<div class='locbar'>
  <div class='item'>
    Products
  </div>
  <div class='arrow'></div>
  <div class='item'>
    Electronics
  </div>
  <div class='arrow'></div>
  <div class='item'>
    LED Televisions
  </div>
</div>

You can achieve this by using css pseudo elements :before and after.

Check the below snippet:

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>