CSS Rectangle with pointy bottom

Question

How would you create a stepper like this? I tried recreating those with clip-path but only managed to make them horizontal not vertical. I've tried many thing but at the time of writing this, this code is the latest try I've made I need it to be before an li so I tried with the ::before but the arrow pointed to the right and looked more like a play button more than anything.

Snippet

.wrapper {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps {
  position: relative;
  height: 80%;
  width: 75%;
  .step {
    height: 80px;
    display: flex;
    align-items: center;
    &::before {
      content: "";
      background: red;
      height: 110%;
      width: 15px;
      margin: 0 2rem;
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 100%, 25% 50%, 0% 50%);
    }
  }
}

<div class="steps">
  <div class="step">
    <p class="step-text">This is a step</p>
  </div>
  <div class="step">
    <p class="step-text">This is a step</p>
  </div>
  <div class="step">
    <p class="step-text">This is a step</p>
  </div>
</div>
</div>

Please show us the code you have tried. We need to see your HTML structure. See https://stackoverflow.com/help/minimal-reproducible-example — A Haworth, Mar 07 '23 at 09:56
For now i'm trying things on codepen https://codepen.io/Setsudan/pen/OJojqQR — Setsu, Mar 07 '23 at 10:04
You mentioned it needed to work with a list, but your example doesn't appear to contain a list? Does it need to be an `
`/`
`, or just something that visually looks like a list? — DBS, Mar 07 '23 at 10:07
A slight format change of the HTML clearly shows it is malformed as is your CSS; probably just a bad paste but making no assumption here. — Mark Schultheiss, Mar 07 '23 at 10:32

score 1 · Accepted Answer · answered Mar 07 '23 at 10:28

Fix your clip-path by using calc CSS function:

.step{
  height: 3rem;
  display: flex;
  align-items: center;
  margin: 2px 0;
}

.step::before{

  --size: 0.4rem;
  
  content: "";
  background: #6ea639;
  height: calc(100% + var(--size));
  width: calc(var(--size) * 2);
  margin: 0 1rem 0 0;
  
  clip-path: polygon(
    0% 0%,                         /* Top left */
    50% var(--size),               /* Top center */
    100% 0%,                       /* Top right */
    100% calc(100% - var(--size)), /* Bottom right */
    50% 100%,                      /* Bottom center */
    0% calc(100% - var(--size))    /* Bottom left */
  );
}

<div class="steps">
  <div class="step">This is a step</div>
  <div class="step">This is a step</div>
  <div class="step">This is a step</div>
</div>

More info: Ribbon shape using clip path

CSS Rectangle with pointy bottom

1 Answers1