Edit code via page gear CSS to adjust pointer position and color. The code was modified by Sergey ET support.

NOTE: If I want to display multiple arrows on the same module… I may need to change the ‘before’ and after in the code since I can only have two before and two after etc. For example… “If you’re using ‘after’ for left, use for the top another pseudo-element – ‘before’, then your code should work fine.” Also… I can add code to the row and section as well.

https://divi.space/tutorials/adding-arrow-section-dividers-to-the-divi-theme/

This requires CSS added to page via gear or main Divi box and adding Class to module etc.

 

/* TOP */
.arrow-section-top:after {
content: ”;
display: block;
position: absolute;
width: 60px;
height: 60px;
background-color: #9f1411;
top: -30px;
left: calc(50% – 30px);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
z-index: -1;
}

/* BOTTOM */
.arrow-section-bottom:before {
content: ”;
display: block;
position: absolute;
width: 60px;
height: 60px;
background-color: #9f1411;
bottom: -30px;
left: calc(50% – 30px);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
z-index: -1;
}

/* LEFT */
.arrow-section-left:after {
content: ”;
display: block;
position: absolute;
width: 60px;
height: 60px;
background-color: #9f1411;
left: calc(0% – 30px);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
z-index: -1;
top: calc(50% – 30px);
}

/* RIGHT */
.arrow-section-right:before {
content: ”;
display: block;
position: absolute;
width: 60px;
height: 60px;
background-color: #9f1411;
right: calc(0% – 30px);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
z-index: -1;
top: calc(50% – 30px);
}

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

This module contains the Classes arrow-section-top arrow-section-bottom arrow-section-left arrow-section-right. When only top and bottom are there then both the top and bottom arrows show. One of them is after and the other is before as you said. However, when I also add left and right classes I only get left displayed as shown… even though one of those is before and the other is after.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

This is using Nelson’s code (peeayecreative.com). It only allows one instance at a time on the same module. To edit… edit CSSĀ  to change background, size of arrow, location, background etc.

NOTE: To force multiple arrow on same module… copy CSS code and change ‘before’ to ‘after’ in code since I can only have two before and two after etc.

1. Add CSS via page gear or main Divi box.

2. Add Class to module, row, section etc.