How to Create a Dog-Ear Effect in Divi

Creating a dog-ear effect on your Divi site elements can add an appealing visual touch, creating an impression of a page corner being folded over. This guide will walk you through applying a consistent dog-ear effect using CSS with specific dimensions, and demonstrate how to add this style within the Divi Builder.

Step 1: Add the CSS code for the dog-ear effect

Here is the CSS for the dog-ear effect:

.dog-ear {
    --dog-ear-size: 35px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--dog-ear-size)), calc(100% - var(--dog-ear-size)) 100%, 0 100%);
}

You can add the CSS into the "Divi > Theme Options > General > Custom CSS" box, or the style.css file of a child theme.

It uses the CSS clip-path property to cut a triangular section out of the bottom-right corner of the element background.

The --dog-ear-size value lets you easily adjust the size of the fold. There shouldn't be any need to touch the clip-path property.

0 Comments

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.