:root {
	--size: 90vmin;
}
body {
	display: grid;
	margin: 0;
	height: 90vh;
	font-size: 72vmin;
}
div {
	scroll-snap-type: y mandatory;
	position: relative;
	clip-path: circle(calc(var(--size) / 2 - 2vmin) at center);
}
div,
div::after,
div::before {
	width: var(--size);
	height: var(--size);
	margin: auto;
	display: block;
	overflow: auto;
}
div::after,
div::before {
	background: hotpink;
	height: calc(var(--size) + var(--size) / 18);
	display: grid;
	justify-content: center;
	align-content: center;
}
div::after {
	content: "⭡";
	clip-path: polygon(0 0, 100% 13%, 100% 100%, 0% 100%);
	scroll-snap-align: end;
	//align-content: end;
}
div::before {
	content: "⭣";
	clip-path: polygon(0 0, 100% 0, 100% 87%, 0 100%);
	scroll-snap-align: start;
	
}