<div class="diagonal"></div>
.diagonal {
 	position: absolute;
  height: 50rem;
  width: 100%;
  display: inline-block;
}
.diagonal:before {
 	position: absolute;
 	content: '';
 	border-style: solid;
	border-width: 0 0 66vw 100vw;
	border-color: #002b37 #409cdc #409cdc #002b37;
 }
.diagonal:after {
 	position: absolute;
 	content: '';
 	border-style: solid;
	border-width: 0 100vw 66vw 0;
	border-color: #2ba198 transparent #2ba198 transparent;
 }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.