Drawing a triangle with CSS, 2 different approaches

Drawing a triangle with CSS, 2 different approaches

<div class="triangle"> </div>

<div class="triangleborder"> </div>

.triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color:green;
  height:50px;
  width:100px;
}

.triangleborder {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 50px 50px 50px;
    height: 50px;
    width: 0px;
}