making a sharp corner effect in CSS using the ::before pseudo element

sharp-corner.css

<!-- html code -->
<div></div>


/* css code */
div {
  position: relative;
  height: 50vh;;
  background-color: #64953D;
}

div::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  border-block-start: 80px solid #6495ED;
  border-inline-end: 80px solid #64953D;
}