This is a really neat looking way to customise a blurb. Terry Clark posted the code on the Divi Theme Users & Elegant Marketplace facebook group, as a work in progress. The blurb module will automatically fold down to the next line as the screen resizes, maintaining its responsiveness./p>

The basic layout is working fine so you can use it as is but you may need to make slight adjustments for varying screen sizes.


In your DIVI Builder:

1. Add a row with 4 columns.
2. Add a blurb module to each column.
3. In the Custom CSS tab for each module, add the class blurbSkewCol1 blurbSkewCol2 blurbSkewCol3 blurbSkewCol4 respectively.
4. Add the CSS code given below, to your stylesheet.

Place the following CSS code in the child-theme’s stylesheet: appearance/editor/stylesheet

/*------------ Skewed Blurbs --------------*/
.blurbSkewCol1,.blurbSkewCol3 {
    background-color: #84A234;
    position: relative;
    height:350px;
}

.blurbSkewCol2,.blurbSkewCol4 {
    background-color: #94BB30;
    position: relative;
    height:350px;
}

.blurbSkewCol1::before,.blurbSkewCol3::before {
    transform:skewY(5deg);
    transform-origin: left top;
    top:-40px;
    left:0;
    content: '';
    position: absolute;
    background: inherit;
    display: inline-block;
    width:100%;
    height:40px;
}

.blurbSkewCol1::after,.blurbSkewCol3::after {
   transform:skewY(-5deg);
   transform-origin: left bottom;
   bottom: -40px;
   left:0;
   content: '';
   position: absolute;
   background: inherit;
   display: inline-block;
   width:100%;
   height:40px;
}

.blurbSkewCol2::before,.blurbSkewCol4::before {
    transform:skewY(-5deg);
    transform-origin: right top;
    top:-40px;
    left:0;
    content: '';
    position: absolute;
    background: inherit;
    display: inline-block;
    width:100%;
    height:40px;
}

.blurbSkewCol2::after,.blurbSkewCol4::after {
    transform:skewY(5deg);
    transform-origin: right bottom;
    bottom:-40px;
    left:0;
    content: '';
    position: absolute;
    background: inherit;
    display: inline-block;
    width:100%;
    height:40px;
}

/* -------- Skew Inner Content -------- */
.blurbSkewCol1 .et_pb_blurb_content,.blurbSkewCol3 .et_pb_blurb_content{
transform: perspective(200px) rotateY(5deg);
display:inline-block;
margin-left:15px;
padding:15px;
z-index:10;
}

.blurbSkewCol2 .et_pb_blurb_content,.blurbSkewCol4 .et_pb_blurb_content{
transform: perspective(200px) rotateY(-5deg);
display:inline-block;
margin-right:15px;
padding:15px;
z-index:10;
}

Some possibilities for the use of skewed blurbs: