Create background using transform property

Question

I have this svg image: http://newbonaprezosite.awery.com.ua/src/assets/images/popup/green.svg

<svg width="1440px" height="389px" viewBox="0 0 1440 389" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="popup" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <polygon id="green" fill="#32AF00" points="1906 0 1906 484 -467 0"></polygon>
        </g>
    </svg>

I wanna create a background, which will be looking like this SVG, using transform: rotate();. But i don't knowhn how. Is it possible to create this background with transform property ?

Answer 1

Like this?:

HTML:

<div></div>

CSS:

div {
  width: 1440px;
  height: 389px;
  position: relative;
  overflow: hidden;
}
div::after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: #32AF00;
  width: 110%;
  height: 100%;
  transform: rotate(12deg) translate(-50%, -50%);
  transform-origin: 50% 50%;
}