How to slant edges of elements in Genesis

For a while I had this article on viget.com saved in my pinboard. I tried the clip-path CSS code given in that article a few times and wasn’t sure what the values were representing or where they came from plus couldn’t get it working in Firefox.

I finally took the time yesterday to research on this topic and present in this tutorial using an example, a succinct step-by-step summary of my findings on how to make edges of elements slanted/angled in Genesis using clip-path CSS property.

Here’s a screenshot of what we are aiming for to begin with:

While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.

Step 1

Let’s register a custom Home Featured widget area and display it below header on the homepage.

In child theme’s functions.php, add

// 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>',
    ) );

}

Step 2

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

Step 3

Let’s do some basic styling of our widget area. In child theme’s style.css add

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

Now on the homepage we should have something like

Step 4

To make it easy for implementing clip-path (IE is not supported, 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.

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.

Note the generated values at the bottom.

Ex.:

0 0, 100% 0, 100% 80%, 0 100%

Step 6

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 7

Let’s load the two .js files on the front page of our site.

Back in functions.php add

//* 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 );

}

Reload your homepage and voila!

Yes, it is responsive.

That’s it. You can now practice with different shapes for your edges if you want.

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%

1. 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>

.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");
}

References:

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/