CodePen Embed - Skewed progress tabs

<!-- Ignore the ugly SVG code -->

<ul>
  <li><a href="#"><span><svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle><circle cx="128" cy="120" r="40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle><path d="M63.79905,199.37405a72.02812,72.02812,0,0,1,128.40177-.00026" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>Account</span></a></li>
  <li><a href="#" class="active"><span><svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M224,177.32122V78.67878a8,8,0,0,0-4.07791-6.9726l-88-49.5a8,8,0,0,0-7.84418,0l-88,49.5A8,8,0,0,0,32,78.67878v98.64244a8,8,0,0,0,4.07791,6.9726l88,49.5a8,8,0,0,0,7.84418,0l88-49.5A8,8,0,0,0,224,177.32122Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><polyline points="177.022 152.511 177.022 100.511 80 47" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline><polyline points="222.897 74.627 128.949 128 33.108 74.617" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline><line x1="128.94915" y1="128" x2="128.01036" y2="234.82131" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line></svg>Shipping</span></a></li>
  <li><a href="#"><span><svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><rect x="24" y="56" width="208" height="144" rx="8" stroke-width="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><line x1="167.99414" y1="168" x2="199.99414" y2="168" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="119.99414" y1="168" x2="135.99414" y2="168" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="23.99414" y1="96.85228" x2="231.99412" y2="96.85228" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line></svg>Payment</span></a></li>
  <li><a href="#"><span><svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="96" y1="152" x2="160" y2="152" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="96" y1="120" x2="160" y2="120" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><path d="M160.00194,40H200a8,8,0,0,1,8,8V216a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V48a8,8,0,0,1,8-8H95.99783" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><path d="M88,72V64a40,40,0,0,1,80,0v8Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>Summary</span></a></li>
</ul>

<details>
  <summary>How it works<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle><circle cx="128" cy="180" r="12"></circle><path d="M127.9995,144.0045v-8a28,28,0,1,0-28-28" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg></summary>
  <div>
      <p>Easy! The tabs (<code>&lt;a&gt;</code>-tags) is skewed by using <code>transform: skewX(-30deg)</code>. Then we skew the elements inside in the other direction, like this: <code>transform: skewX(30deg)</code>, making them stand up straight again.</p>
  </div>
</details>

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");

*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f3f4f6;
}

ul {
  display: flex;
}

li {
  margin-left: -2px;
  &:first-child {
    a {
      border-radius: 8px 0 0 8px;
    }
  }
  &:last-child {
    a {
      border-radius: 0 8px 8px 0;
    }
  }
}

a {
  background-color: #fff;
  color: #6b7280;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 600;
  border: 2px solid #d1d5db;
  height: 3em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  border-radius: 0;
  transform: skew(-30deg);
  position: relative;
  transition: color 0.15s ease, border-color 0.15s ease;

  &:hover,
  &:focus,
  &.active {
    outline: 0;
    color: #6366f1;
    border-color: #6366f1;
    z-index: 1;
  }

  & > * {
    transform: skew(30deg);
  }

  span {
    display: flex;
    align-items: center;
    justify-content: center;
    svg {
      margin-right: 0.375em;
      width: 1.5em;
      height: 1.5em;
    }
  }
}

details {
  margin-top: 2rem;
  color: #6b7280;
  width: 90%;
  max-width: 400px;
  position: relative;

  div {
    background-color: #FFF;
    border: 2px solid #d1d5db;
    padding: 1.25rem;
    border-radius: 8px;
    margin-top: 1rem;
    position: absolute;
    width: 100%;
    &:after {
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      background-color: #FFF;
      transform: rotate(45deg) translatex(-50%);
      border-left: 2px solid #d1d5db;
      border-top: 2px solid #d1d5db;
      position: absolute;
      top: -4px;
      left: 50%;
    }
    & > * + * {
      margin-top: 0.75em;
    }

    code {
      font-size: 1rem;
      font-family: monospace;
      font-weight: 600;
      background-color: #eee;
    }

    strong {
      font-weight: 600;
    }
  }
}

summary {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  text-align: center;
  cursor: pointer;
  &::-webkit-details-marker {
    display: none;
  }
  
  &:hover, &:focus {
    color: #6366f1;
  }

  svg {
    margin-left: 0.25em;
    width: 1.5em;
    height: 1.5em;
  }
}

View Compiled

// Nope

This Pen is owned by Håvard Brynjulfsen on CodePen.

See more by @havardob on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.