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%);
}Related Post: Adding CSS to the Divi Theme
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