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