Add a Parallelogram Background to a Divi Column

Written by Dan Mossop

Looking to add a unique twist to your Divi columns? Styling a Divi column’s background as a parallelogram is a striking way to enhance your page design. Follow the steps below to achieve this effect using custom CSS in Divi.

Before diving into the steps, here’s a preview of what we'll accomplish:

Add a Parallelogram Background to a Divi Column using CSS

1. Open Divi Builder

Navigate to the page where you want to apply the parallelogram effect and open the Divi Builder. Find the specific column you'd like to style.

2. Locate the Column's "Before" Custom CSS Box

Access the Column Settings:

Click on the settings icon for the column.
Go to the "Advanced" tab and then the "Custom CSS" section.
Under "Module Elements," locate the "Before" option.

3. Insert the CSS Code

Copy and paste the following CSS code under "Before" to create the parallelogram effect:

content: "";
background: rgba(128,128,255,0.3);
position: absolute;
width: 100%;
height: 100%;
transform: skew(10deg); /* Set parallelogram angle */
padding: 40px; /* Add padding to ensure content covered */
top: -40px; /* Compensate for padding (set to 0px if no padding) */
left: -40px; /* Compensate for padding (set to 0px if no padding) */

Here’s a break down of the CSS:

content: ""; Ensures the pseudo-element is visible.
background: rgba(128, 128, 255, 0.3); Sets the background color; adjust as needed.
position: absolute; Positions the pseudo-element relative to its container.
width: 100%; height: 100%; Ensures the pseudo-element covers the entire column.
transform: skew(10deg); Applies the skew effect to create the parallelogram.
padding: 40px; top: -40px; left: -40px; Adjusts padding to ensure the skewed element covers the column area without gaps.

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

Enhance Your Designs with Dynamic Content!

Elevate your Divi site by integrating ACF dynamic content into your custom designs. The Divi Dynamic Content Extended plugin seamlessly brings interactive elements to your pages, making them smarter and more visually appealing.

Get Divi Dynamic Content Extended

| columns

Latest Posts

Add Text Before the Number in the Divi Circle Counter

Adding a custom number prefix to your Circle Counter lets you clarify what the value represents—such as currency, units, or labels—without relying on the default percentage format. This helps your counters better match real-world metrics and keeps the design...

Add a Second Line of Text in a Divi Button Module

Adding a second line of text beneath a button’s main label lets you provide extra context, a brief benefit statement, or a supporting call-to-action without cluttering your design. This can improve clarity and increase clicks by making the button’s purpose more...

Top (or Bottom) Align Divi Icon List Module Icons

When Icon List items wrap onto multiple lines, the default icon alignment can make the icon appear vertically centered next to the text, which may look unbalanced or harder to scan. Setting the icons to align at the top creates a cleaner, more consistent...

Make Divi Button Modules Full Width with Centered Content

This configuration makes a Divi button stretch to the full width of its container while keeping its label neatly centered, creating a bold, edge-to-edge call-to-action. You might want this for hero sections, pricing tables, or any layout where a standard-sized button...

Fix the Flickr Typo in the Divi Social Media Follow Module

Sometimes it's the small things that make the difference... there is a minor typo in the Divi Social Media Follow module that was present in Divi 4, and (currently) remains in Divi 5. Specifically, the tooltip for Flickr is misspelled as "Flikr". Here's how to fix...

Divi Booster