How to create a triangle with one side border using only html and css

Question

How to create a triangle with border only on one side of the triangle using only html and css. How would I be able to achieve that.

I am able to create a triangle using different methods like clip-path, linear gradient but the border is something which is very tricky

Answer 1

clip-path combined with gradient

.box {
  height: 300px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  /* 10px = thickness */
  background: linear-gradient(to bottom right, red calc(50% + 10px), lightblue 0);
}


body {
  margin: 0;
}

<div class="box"></div>