JSFiddle - React, Tailwind, and code Playground

by kicaj

HTML

<svg viewBox="0 0 100 14" preserveAspectRatio="xMidYMin">
  <defs>
  </defs>
  <mask id="tra">
    <rect x="0" y="0" width="100" height="100" fill="white" />
    <polygon points="0,0 100,0 0,14" />
  </mask>
  <polygon points="100,0 100,14, 0,14" fill="green" />
  <circle cx="50" cy="14" r="14" fill="red /*url(#rgrad)*/" mask="url(#tra)" />
</svg>
<div class="skew">
  Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym...
</div>

CSS

svg {
  overflow: visible;
}

.skew {
  background: green;
  padding: 10px;
  min-height: 200px;
  color: white;
}