ui wizard shape stylings in pure css

Question

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?

score 1 · Answer 1 · answered Feb 02 '22 at 10:53

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 class="arrow-pointer">Step 1</li>
  <li class="arrow-pointer">Step 2</li>
  <li class="arrow-pointer">Step 3</li>
</ul>

</body>
</html>

I updated the description as well by "remove the gap between each steps" — Jack, Feb 02 '22 at 11:03

DnD2k21 · Accepted Answer · 2022-02-02T11:34:35.447

#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 class="right">Step 1</div>
        <div class="left right active">Step 2</div>
        <div class="left right">Step 3</div>
        <div class="left right">Step 4</div>
        <div class="left">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.

yes, something similar to that. But is there anyway to completely remove the gaps between arrows — Jack, Feb 02 '22 at 11:20

ui wizard shape stylings in pure css

2 Answers2