Creating diagonal at the bottom on Full Screen Slider

Well an elegant way would be to use svg dividers here.

See here with red color and a different svg –
with the svg in the code below and if you fill the svg with the background-color of your following container it will look like the slanted things from color-section.
https://webers-testseite.de/buttons/

you see the method is usefull to have very nice and semitransparent dividers.

if it is a full-screen slider you can insert an svg into the slider-container by this in child-theme functions.php:

function insert_dividers(){
?>
<script>
(function($){
	$('.divider.bottom .avia-slideshow').append('<svg version="1.1" id="triangle" class="bottom" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="300px" viewBox="0 0 1500 300" preserveAspectRatio="none"><g fill="#900"><polygon points="1500,0 1500,300 0,300 "/></g></svg>');	
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'insert_dividers');

Give a custom class to your fullscreen slider: divider bottom

you see on that svg – it has its own ID and a class and the triangle is filled red to see better what happens here.
you can fill the triangle later by quick css very easy by:

#triangle g {
    fill: #fff !important;
}

you now only have to shift the svg inside the slider and give a z-index to it:

#top .divider .avia-slideshow svg.bottom {
    position: absolute !important;
    bottom: -1px !important;
    height: 300px;
    z-index: 90;
    width: 100vw !important;
    transform: rotateY(180deg);
}

.divider .avia-slideshow-dots {
    bottom: 100px;
    position: absolute;
}

if you like to have the other directiion of incline – get rid of transform: rotate

btw: if you wonder why there are two classes on that slider element?
i use this method with different svgs : top and bottom – so i got a lot of svgs as dividers – the divider class is for inducing the insertion; the bottom1, 2, 3 etc is for the different svgs i like to insert. the class inside svg ( bottom or top) is just for quick css to position the svg the right way.