How can I create a color section bottom border arrow shape?

Hey xuamox,

I’m sure that would be possible, but there is nothing like that in the theme by default unfortunately.

Best regards,
Rikard

Hi,
Here is an experimental solution:

This arrow border is created with css and jQuery in a code block element, when adding this code to a code block you have to keep in mind the colors of the two sections. The color of the top of the arrow is transparent, but the lower part that creates the arrow needs to match your lower section which needs to be a different color, otherwise you will not see the arrow.
In the screenshot above I had the color a little off so you can see which part is the code block and which part is the lower section.
In the code below change the color “#f0f0f0” to match your lower section.

<script>
(function($){
  $(document).ready(function(){
$( ".separator" )
  .closest( ".container_wrap" )
  .css( "border-top-width", "0px" );
$( ".separator" )
  .closest( ".container" )
  .css( "max-height", "0px" );
$( ".separator" )
  .closest( ".template-page.content.av-content-full.alpha.units" )
  .css( "padding", "0px" );
 });
})(jQuery);
</script>
<style>
.separator {
    width: 3000px;
    clear: both;
    overflow: hidden;
    left: 50%;
    margin-left: -1500px;
    position: absolute;
    z-index: -1;
    bottom: 0
}
.separator:after,.separator:before {
    content: '';
    width: 0;
    height: 0;
    display: block;
    border-style: solid
}
.separator:before {
    float: left;
    border-width: 60px 0 0 1500px;
    border-color: transparent transparent transparent #f0f0f0
}
.separator:after {
    float: right;
    border-width: 0 0 60px 1500px;
    border-color: transparent transparent #f0f0f0 transparent
}
</style>
<div class="separator"></div>

All of this code must be in the code block, which you will position between full width elements on your page.
#enjoy

Best regards,
Mike

Hi,
You would have to change the class “separator” in the css, jQuery, and div for each time you use it on the same page, for example to add another one try “separator_a” like this:

<script>
(function($){
  $(document).ready(function(){
$( ".separator_a" )
  .closest( ".container_wrap" )
  .css( "border-top-width", "0px" );
$( ".separator_a" )
  .closest( ".container" )
  .css( "max-height", "0px" );
$( ".separator_a" )
  .closest( ".template-page.content.av-content-full.alpha.units" )
  .css( "padding", "0px" );
 });
})(jQuery);
</script>
<style>
.separator_a {
    width: 3000px;
    clear: both;
    overflow: hidden;
    left: 50%;
    margin-left: -1500px;
    position: absolute;
    z-index: -1;
    bottom: 0
}
.separator_a:after,.separator_a:before {
    content: '';
    width: 0;
    height: 0;
    display: block;
    border-style: solid
}
.separator_a:before {
    float: left;
    border-width: 60px 0 0 1500px;
    border-color: transparent transparent transparent #f0f0f0
}
.separator_a:after {
    float: right;
    border-width: 0 0 60px 1500px;
    border-color: transparent transparent #f0f0f0 transparent
}
</style>
<div class="separator_a"></div>

you can name it anything as long as it is unique and the css, jQuery, and div all match.

Best regards,
Mike