JSFiddle - React, Tailwind, and code Playground

by Edward

HTML

<div class="triangle-down"></div>
<div class="content"></div>

SCSS

.triangle-down {
	position: relative;
	height: 30vh;
	background-color: #003247;
	
	&::after {
		content: '';
		position: absolute;
		top: 30vh;
		left: 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 100px 50vw 0 50vw;
		border-color: #003247 transparent transparent transparent;
	}
}

.content {
	height: 100vh;
	background-color: #557684;
}