JSFiddle - React, Tailwind, and code Playground

by jlongster

HTML

<p>
    original
    <div class="render-clipped"></div>
</p>

<p>
    scaled &nbsp; -> &nbsp;
    rotated &nbsp; -> &nbsp;
    skewed &nbsp; -> &nbsp;
    target
</p>

<div class="render-scaled"></div>
<div class="render-rotated"></div>
<div class="render-skewed"></div>
<div class="render-result"></div>

CSS

.render-clipped {
      width: 50px;
      height: 50px;
      background: -moz-linear-gradient(-45deg, #00FF00 50%, transparent 0);
      background: -o-linear-gradient(-45deg, #00FF00 50%, transparent 0);
      background: -webkit-gradient(linear, 0 0, 50 50, from(#00FF00), color-stop(0.5, #00FF00), color-stop(0.5, transparent), to(transparent));
}

.render-scaled {
      width: 93px;
      height: 104px;
      background: -moz-linear-gradient(-0.727211rad, #00FF00 50%, transparent 0pt);
      background: -o-linear-gradient(-0.727211rad, #00FF00 50%, transparent 0pt);
      background: -webkit-gradient(linear, -6 5, 98 98, from(#00FF00), color-stop(0.5, #00FF00), color-stop(0.5, transparent), to(transparent));
}

.render-rotated {
      width: 93px;
      height: 104px;
      background: -moz-linear-gradient(-0.727211rad, #00FF00 50%, transparent 0pt);
      background: -o-linear-gradient(-0.727211rad, #00FF00 50%, transparent 0pt);
      background: -webkit-gradient(linear, -6 5, 98 98, from(#00FF00), color-stop(0.5, #00FF00), color-stop(0.5, transparent), to(transparent));
      -moz-transform: rotate(-0.291457rad);
      -moz-transform-origin: top left;
      -webkit-transform: rotate(-0.291457rad);
      -webkit-transform-origin: top left;
      -o-transform: rotate(-0.291457rad);
      -o-transform-origin: top left;
}

.render-skewed {
      width: 93px;
      height: 104px;
      background: -moz-linear-gradient(-0.727211rad, #00FF00 50%, transparent 0pt);
      background: -o-linear-gradient(-0.727211rad, #00FF00 50%, transparent 0pt);
      background: -webkit-gradient(linear, -6 5, 98 98, from(lime), color-stop(0.5, lime), color-stop(0.5, transparent), to(transparent));
      -moz-transform: rotate(-0.291457rad) skewY(0.391125rad);
      -moz-transform-origin: top left;
      -webkit-transform: rotate(-0.291457rad) skewY(0.391125rad);
      -webkit-transform-origin: top left;
      -o-transform: rotate(-0.291457rad) skewY(0.391125rad);
     ...

JavaScript

// Press the play button at the top