How to create CSS Skewed Background ft. Pseudo Element

There is many ways to create a skewed background in CSS, the one I prefer is using Pseudo Element, and this because of the nature of pseudo elements in general that makes it more flexible to handle, manipulate, transform, without affecting the original or target element that we want to make its background skewed

First after adding some Markup like this:

<section>
            <h1>Gorithm is here</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, quae! Voluptate esse placeat aperiam
                eos
                iusto tempore quaerat doloremque et voluptates commodi maiores consequatur corporis dolore sequi modi
                quas,
                pariatur tempora illum. In consequuntur distinctio recusandae labore, vitae consectetur sequi molestias
                illum tempore a possimus quod nihil. Adipisci, ducimus placeat.</p>

        </section>
        <section>
            <h1>Gorithm is here again</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, quae! Voluptate esse placeat aperiam
                eos
                iusto tempore quaerat doloremque et voluptates commodi maiores consequatur corporis dolore sequi modi
                quas,
                pariatur tempora illum. In consequuntur distinctio recusandae labore, vitae consectetur sequi molestias
                illum tempore a possimus quod nihil. Adipisci, ducimus placeat.</p>
        </section>

Then the whole trick is in the CSS, which is adding a pseudo element that takes the full width of it's parent (the target element) and some kind of its parent height and half (like 150%) and using the transform skew():

  section:nth-child(1)::before {
            content: "";
            position: absolute;
            inset: 0;
            top: -50%;
            height: 150%;
            background-color: springgreen;
            z-index: -1;
            transform: skew(0deg, -10deg);
            box-shadow: 0 -50px 100px 50px transparent;
        }

Make sure that the parent element of the pseudo element has a position set to relative, otherwise the effect won't function well.

Tutorial: here
Live Demo & Code: here