Cacher is the code snippet organizer for pro developers

https://sarasoueidan.com/blog/css-svg-clipping/

https://www.smashingmagazine.com/2015/05/creating-responsive-shapes-with-clip-path/

http://cssplant.com/clip-path-generator

http://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive

https://www.reddit.com/r/web_design/comments/3tqlgs/how_do_i_give_my_div_a_slanted_bottom_border/

.home-featured {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
    clip-path: url("#home_featured");
}

In my next tutorial I am going to extend this technique to set up the following in Altitude Pro:

Some notes:

1. The order of coordinates does not matter. In most examples and generators, we start at left top corner, go right, then down, then left and back up.

Top Left = 0 0
Top Right = 100%, 0
Bottom Right = 100%, 100%
Bottom Left = 0, 100%

//* Let’s load the two .js files on the front page of our site.
//* Enqueue scripts
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
function sk_enqueue_scripts() {
 
    // if we are not on front page, abort.
    if ( ! is_front_page() ) {
        return;
    }
 
    wp_enqueue_script( 'clip-path-polygon', get_stylesheet_directory_uri() . '/js/clip-path-polygon.min.js', array( 'jquery' ), '0.1.10', true );
    wp_enqueue_script( 'home', get_stylesheet_directory_uri() . '/js/home.js', array( 'clip-path-polygon' ), CHILD_THEME_VERSION, true );
 
}

// Create a file named say, home.js in child theme’s js directory having the following code:

jQuery(function( $ ){
 
    var home_featured = [[0, 0], [100, 0], [100, 80], [0, 100]];
    $('.home-featured').clipPath(home_featured, {
        isPercentage: true,
        svgDefId: 'home-featured'
    });
 
});

// The comma separated number pairs in square brackets are the ones from previous step w/o the % sign.

Step 5
In the next step we need to initialize clip-path on .home-featured div while specifying the 4 coordinates that make up the vertices which define the clip path. A clip path basically defines the region that you want to keep/show while discarding (not showing in browser) the rest.

The easiest way to get the values of coordinates is by using the Clippy clip-path generator.

On the Clippy site select Trapezoid shape from the right side and drag the 4 corners to match your desired shape of the slanted element.

2. This is the format of generated code:

<svg width="0" height="0">
    <defs>
        <clipPath id="home_featured" clipPathUnits="objectBoundingBox">
            <polygon points="0 0, 1 0, 1 0.8, 0 1" />
        </clipPath>
    </defs>
</svg>

// Step 4
// To make it easy for implementing clip-path with cross-browser support (see browser support here) we are going to use jQuery clip-path-polygon plugin.

// Upload clip-path-polygon.min.js to your child theme’s js directory.

.home-featured {
    background-color: #039be5;
    color: #fff;
    padding: 150px 0;
}

Step 2
Go to Appearance > Widgets and populate Home Featured widget area.

// https://sridharkatakam.com/slant-edges-elements-genesis/

// Register Home Featured widget area
genesis_register_widget_area(
    array(
        'id'          => 'home-featured',
        'name'        => __( 'Home Featured', 'my-theme-text-domain' ),
        'description' => __( 'Home Featured widget area', 'my-theme-text-domain' ),
    )
);
 
// Display Home Featured widget area below header
add_action( 'genesis_after_header', 'sk_home_featured' );
function sk_home_featured() {
 
    // if we are not on front page, abort.
    if ( ! is_front_page() ) {
        return;
    }
 
    genesis_widget_area( 'home-featured', array(
        'before'    => '<div class="home-featured widget-area"><div class="wrap">',
        'after'     => '</div></div>',
    ) );
 
}