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.