- var data = [
- 	{
- 		slist: ['#ebac79', '#d65b56'], 
- 		title: 'gingerbread', 
- 		ptext: 'Pancake muffin chocolate syrup brownie.'
- 	}, 
- 	{
- 		slist: ['#90cbb7', '#2fb1a9'], 
- 		title: 'brownie', 
- 		ptext: 'Cake lemon berry muffin plum macaron.'
- 	}, 
- 	{
- 		slist: ['#8a7876', '#32201c'], 
- 		title: 'ice cream', 
- 		ptext: 'Wafer apple tart pie muffin gingerbread.'
- 	}, 
- 	{
- 		slist: ['#a6c869', '#37a65a'], 
- 		title: 'lava cake', 
- 		ptext: 'Liquorice plum topping chocolate lemon.'
- 	}
- ].reverse();
- var n = data.length;

while n--
	article(style=`--slist: ${data[n].slist}`)
		h3 #{data[n].title}
		p #{data[n].ptext}
View Compiled
$w: 32em;
$h: 5em;
$b: .5em;
$p: .125em;
$d: $h - 2*$b;
$f0: 5;
$f1: 4;
$lh: 1.375;

*, :before, :after {
	box-sizing: inherit;
	margin: 0;
}

html {
	--i: var(--wide, 1);
	--ci: calc(1 - var(--i));
	background: whitesmoke;
	
	@media (max-width: 775px) { --wide: 0 }
	
	@media (max-width: 250px) { font-size: .75em }
	
	@media (max-width: 185px) { font-size: .5em }
}

body {
	filter: drop-shadow(0 2*$b 2*$b rgba(#000, .2))
}

article {
	--d: calc(var(--i)*#{$d} + var(--ci)*#{$lh}*1em);
	box-sizing: border-box;
	display: grid;
	grid-gap: 0px calc(var(--i)*#{$h});
	grid-template: repeat(2, max-content)/ var(--d) 1fr;
	position: relative;
	margin: 1em auto;
	border: solid $b transparent;
	padding: $p;
	width: calc(var(--i)*#{$w} + var(--ci)*100%); min-height: $h;
	border-radius: calc(var(--i)*#{.5*$h});
	background: 
		radial-gradient(circle at 0 2*$h, 
				rgba(#000, calc(var(--i)*.8)) .5*$h, transparent 2.25*$h) 
			border-box, 
		linear-gradient(#dbdbdb, #fff) content-box, 
		linear-gradient(var(--slist)) padding-box, 
		linear-gradient(#fff, #dcdcdc) border-box;
	font: 1.5em/ #{$lh} trebuchet ms, verdana, sans-serif;
	clip-path: var(--wide, inset(0 round #{.5*$h}));
	counter-increment: c;
	
	&:before {
		position: absolute;
		top: -$b; left: -$b;
		width: $h + $d + $b; height: calc(var(--i)*#{$h});
		transform-origin: 100% 100%;
		transform: skewx(45deg);
		box-shadow: 0 0 7px rgba(#000, .1);
		background: linear-gradient(#fff, #e4e4e4);
		content: var(--wide, '')
	}
	
	&:after {
		display: grid;
		place-content: center;
		grid-row: 1/ span calc(1 + var(--i));
		position: relative;
		border: solid calc(var(--i)*#{$b}) transparent;
		margin: calc(var(--i)*#{-$p} + var(--ci)*.25rem);
		width: var(--d); height: var(--d);
		border-radius: 50%;
		box-shadow: inset 0 0 1px 1px #efefef, 
			inset 0 (-$b) rgba(#000, .1);
		background: 
			linear-gradient(var(--slist)) padding-box, 
			linear-gradient(#d0d0d0, #e7e7e7) border-box;
		color: #fff;
		text-align: center;
		content: counter(c, decimal-leading-zero);
	}
}

h3, p { padding: 0 .5rem; }

h3 {
	font-size: $f0/$f1*1em;
}

p {
	grid-column: var(--ci)/ span calc(1 + var(--ci))
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.