JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

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

CSS

.wrapper
      {
            width: 200px;
            height: 200px; 
            margin-left: 150px;
            margin-top: 150px;
            border: 1px solid green;
      }
 .triangle
      {
            width: 100%;
            height: 100%;

            background:
                 linear-gradient(to right top, transparent 36.8%, #8d4 36.8%, #8d4 50%, transparent 50%),
                 white;
            box-shadow: 0 0 5px aqua;   
            transform:
                  scaleX(.7)                /* ужимаем координатную сетку по горизонтали */
                  translateY(11%)      /*двигаем по-вертикали*/     
                  scaleY(.864)         /*относительно получившегося центра фигуры, мы ещё и ужимаем вертикальную координатную сетку*/
                  rotate(-45deg)       /*относительно текущего центра фигуры и по изменённым по горизонтали и вертикали координатным сеткам делаем поворот. хоть относительно новых сеток у нас прямоугольник, в оригинале у нас квадрат, поэтому при вращении неожиданно вылезает ромбик :-) */
                      ;       
      }