ui wizard shape stylings in pure css-CodePudding

I am creating a web application and I need to add a ui wizard to that only using html, js, and css. It was achievable. But here need to change the shapes of the steps as in the attached image. In addition to the image I need to remove the gap between each steps. For that I need some css support. So anyone have an idea to create this ui using pure css & html?

CodePudding user response：

#flowBoxes {
    margin:auto;
    padding:20px;
    min-width:700px;

}
#flowBoxes div {
    display:inline-block;
    position:relative;
    height:25px;
    line-height:25px;
    padding:0 20px;
    border:1px solid #ccc;
    margin-right:-4px;
    background-color:white;
}

#flowBoxes div.right:after{
    content:'';
    border-top:1px solid #ccc;
    border-right:1px solid #ccc;
    width:18px;
    height:18px;
    position:absolute;
    right:0;
    top:-1px;
    background-color:white;
    z-index:150;
    
    -webkit-transform: translate(10px,4px) rotate(45deg);
       -moz-transform: translate(10px,4px) rotate(45deg);
        -ms-transform: translate(10px,4px) rotate(45deg);
         -o-transform: translate(10px,4px) rotate(20deg); 
            transform: translate(10px,4px) rotate(45deg);
}

#flowBoxes div.left:before{
    content:'';

    width:18px;
    height:18px;
    position:absolute;
    left:0;
    top:-1px;
    background-color:white;
    z-index:50;
    
    -webkit-transform: translate(-10px,4px) rotate(45deg);
       -moz-transform: translate(-10px,4px) rotate(45deg);
        -ms-transform: translate(-10px,4px) rotate(45deg);
         -o-transform: translate(-10px,4px) rotate(20deg);
            transform: translate(-10px,4px) rotate(45deg);
}
#flowBoxes .active{
    background-color:green;
    color:white;
}
#flowBoxes div.active:after{
    background-color:green;
}

<div id="flowBoxes">
        <div >Step 1</div>
        <div >Step 2</div>
        <div >Step 3</div>
        <div >Step 4</div>
        <div >Step 5</div>
</div>

I think this is what you are looking for.

I am adding this as another answer because the first answer was really simple and can help others too..

Page Navigation Wizzard UI

I've made changes to that code and here you have the updated snippet.

CodePudding user response：

I hope this is simple to understand. Please change color as per ur needs.

ul {
  display: flex;

}

.arrow-pointer {
  list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 25px;
}

.arrow-pointer {
  width: 250px;
  height: 50px;
  background: gray;
  position: relative;

  
}
.arrow-pointer:not(:first-child):after {
    content: '';
    position: absolute;
    left: 0; bottom: 0; width: 0; height: 0;
    border-left: 25px solid white;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
  }

 .arrow-pointer:not(:last-child):before {
    content: '';
    position: absolute;
    right: -25px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 25px solid gray;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
  }

<!DOCTYPE html>
<html>
<body>

<h1>The ul element</h1>

<ul>
  <li >Step 1</li>
  <li >Step 2</li>
  <li >Step 3</li>
</ul>

</body>
</html>