<div data-triangle="矩形三角形"></div>
<div data-triangle="等腰三角形"></div>
<div data-triangle="等边三角形"></div>
<div data-triangle="随机三角形"></div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  
  div {
    width: 40vh;
    height: 40vh;
    margin: 4vh;
    position: relative;
    animation:change 2s linear infinite alternate;
    
    &::before {
      content: attr(data-triangle);
      position: absolute;
      left: 50%;
      top: calc(100% + 1vh);
      transform: translate(-50%, 0);
      white-space: nowrap;
    }
    
    
    &:nth-child(1) {
      background:linear-gradient(to bottom left, transparent 49.5%,red 50%);
    }
    
    &:nth-child(2) {
      background-image:
        linear-gradient(to bottom right, transparent 49.5%,red 50%),
        linear-gradient(to bottom left,  transparent 49.5%,red 50%);
        background-size:50.3% 100%;
        background-position:left,right;
        background-repeat:no-repeat;
    }
    
    &:nth-child(3) {
      --w:40vh;
      width:var(--w);
      height:40vh;
      // wg = w/2 + .5px
      // (w/2)² + hg² = w² ---> hg = (sqrt(3)/2) * w ---> hg = 0.866 * w
      background-image:
        linear-gradient(to bottom right, transparent 49.5%,red 50%),
        linear-gradient(to bottom left,  transparent 49.5%,red 50%);
        background-size:calc(var(--w)/2 + 0.5px)  calc(0.866 * var(--w));
        background-position:
          left bottom,right bottom;
        background-repeat:no-repeat;
        animation:none;
    }
    
    &:nth-child(4) {
      background-image:
        linear-gradient(to bottom right, transparent 50%,red 0),
        linear-gradient(to bottom left, transparent 50%,red 0);
        background-size:20.5% 60%,80% 60%;
        background-position:
          left bottom,right bottom;
        background-repeat:no-repeat;
    }
  }
}

@keyframes change {
  from {
    width:40vh;
    height:40vh;
  }
  to {
    height:30vh;
    width:108vh;
  }
}