:root {
	--cfg: #000;
	--cbg: lightblue;
	counter-reset: item;
}

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

body, li {
	background: var(--cbg);
}

ol, li {
	all: unset;
}

ol {
	display: flex;
	flex-direction: column;
}

li {
	counter-increment: link;
	display: block;
	text-align: center;
	padding: 0.1em 1em;
	border: 0.1em solid var(--cfg);
	margin-block: -0.05em;
	border-radius: 0 9in 9in 0;
	padding-inline: 0.75em 1.5em;
	margin-inline: 0.75em 0em;
	position: relative;
	border-inline-color: transparent var(--cfg);
	
	&::after {
		content: counter(link);
		display: grid;
		place-content: center;
		height: 80%;
		aspect-ratio: 1;
		font-size: 0.8em;
		border: 0.125em solid var(--cfg);
		border-radius: 9in;
		position: absolute;
		top: 10%;
		right: 0;
		margin-inline: 0.125em;
	}
}

li:nth-child(2n) {
	border-radius: 9in 0 0 9in;
	padding-inline: 1.5em 0.75em;
	margin-inline: 0 0.75em;
	border-inline-color: var(--cfg) transparent;
	
	&::after {
		left: 0;
	}
}