So You Want CSSome Triangles

And I really want a new book

One color infill

          width: 0; height: 0;
          border-bottom: 120px solid #99FF66;
          border-left: 70px solid transparent;
          border-right: 70px solid transparent;
        

Border only

          .triangle-2-outside {

            position:relative;
            width: 0; height: 0;
            border-bottom: 120px solid #99FF66;
            border-left: 70px solid transparent;
            border-right: 70px solid transparent;
          }

          .triangle-2-inside {
            position: absolute;
            top:6px;
            left:-63px;
            width: 0; height: 0;
            border-bottom: 110px solid #ffffff;
            border-left: 63px solid transparent;
            border-right: 63px solid transparent;
          }
        

Gradient infill

           .triangle-3 {
             width: 160px;
              height: 200px;
              position: absolute;
              top: 50%;
              left: 10%;
              clip: rect(auto, 200px, auto, 100px);
              transform: rotate(-90deg);
            }

            .triangle-3::after {
              content: "";
              position: absolute;
              top: 20px;
              bottom: 10px;
              left: 20px;
              right: 20px;
              background: -webkit-gradient
              (linear, left top, left bottom,
              color-stop(0%, #ffffff),
              color-stop(100%, #99FF66));
              transform: rotate(-45deg);
            }
         

Made with enthusiasm and frustration by Leona Hu