如果您正在寻找CSS解决方案，您可以在这里使用多个三角形并获得所需的结果。
就像这样：

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 210px 100vw;
    border-color: transparent transparent #1a202c;
}

.triangle::before {
    position: relative;
    left: -50vw;
    top: -19px;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 105px 50vw;
    border-color: transparent transparent #83e5da;
}

.triangle::after {
    position: relative;
    left: -100vw;
    top: -16px;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 105px 50vw;
    border-color: transparent transparent #1a202c;
}

个字符

不要玩边框，考虑现代方法更容易调整

.box {
  /* triangle size */
  width: 100%;
  height: 50vh;
  /* */
  background: 
   linear-gradient(lightblue /* line color*/ 0 0) no-repeat
    right/40%, /* 40% = line length */
   #000; /* background color */
  clip-path: polygon(100% 0,100% 100%,0 100%);
  display: grid;
  overflow: hidden;
}
.box::before {
  content:"";
  clip-path: inherit;
  background-color: inherit;
  translate: 30px; /* the line thickness */
}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: end;
}

个字符