i have three divs. I want to use clip path but i left with white spaces. I want to slide divs over one another so divs look like as shown in image (Image: https://i.stack.imgur.com/uqv7v.png) (without white space). HTML and CSS code is below:

My CSS code is below:

    .step-label {
    font-weight: bold;
    color: white;
    font-size: 12px;
    display: block;
    margin: auto;
    width: 96%;
    display: flex;
    text-align: center;
}

    .step-x {
    display: inline-block;
    width: 33.33%;
    padding: 20px 0;
}

.s1{clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);}
.s2{clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);}
.s3{clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);}

<div class="step-label">
    <div class="step-x s1" style="background-color:blue;"> Step 1</div>
    <div class="step-x s2" style="background-color:red;"> Step 2</div>
    <div class="step-x s3" style="background-color:orange; ;"> Step 3</div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

See image of Actual Look, I need Thanks for the help!

CodePudding user response：

Use negative margin and different clip-path. To achieve same effect

Note: As you have provided width and stuff in %, so below method will not applicable on all screen. You can use absolute values

.step-label {
    font-weight: bold;
    color: white;
    font-size: 12px;
    display: block;
    margin: auto;
    width: 96%;
    display: flex;
    text-align: center;
}

    .step-x {
    display: inline-block;
    width: 33.33%;
    padding: 20px 0;
}

.s1{clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);margin-right:-48px}
.s2{clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);}
.s3{clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);margin-left:-48px}

<div class="step-label">
    <div class="step-x s1" style="background-color:blue;"><i class="fas fa-check-circle"></i> Step 1</div>
    <div class="step-x s2" style="background-color:red;"><i class="fad fa-circle-notch"></i> Step 2</div>
    <div class="step-x s3" style="background-color:orange; ;"><i class="fad fa-circle-notch"></i> Step 3</div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Use clip-path with only the middle element:

.step-label {
  font-weight: bold;
  color: white;
  font-size: 12px;
  display: flex;
  text-align: center;
}

.step-x {
  flex:1;
  padding: 20px;
}

.s2 {
  box-shadow:0 0 0 100px red;
  /* adjust the 30px to control the curvature */
  clip-path: polygon(0 0, calc(100%   30px) 0,100% 100%, -30px 100%);
  z-index:1;
}

<div class="step-label">
  <div class="step-x s1" style="background-color:blue;"> Step 1</div>
  <div class="step-x s2" style="background-color:red;"> Step 2</div>
  <div class="step-x s3" style="background-color:orange; ;"> Step 3</div>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>