A Section with a downward triangle at its bottom center.

CSS used:

%root% {
	position: relative;
}

%root%::after {
	content: "";
	position: absolute;
	bottom: -39px;
	left: 50%;
	width: 80px;
	height: 40px;
	background-color: var(--action-dark); /* Set your arrow color here */
	clip-path: polygon(50% 100%, 0 0, 100% 0); /* Triangle shape */
	transform: translateX(-50%);
}

@media (max-width: 478px) {
	%root%::after {
		width: 60px;
		height: 30px;
		bottom: -29px;
	}
}