Diagonal Border angle?

Great

Hi! Is it possible to not only change the angle, but make it round in stead of diagonal? Something like this:

Hope you can help me!

Hi thanks! Something happend, the radius is only not in the middel. Maybe thats because it is still rotated? See link! And I want the circle on the other side, so downstairs in stead of upstairs.

Now we’re working on it.. I would like to try two options. The half circle as described above and 2nd option: in stead of a circle a sort of rounded arrow. Something like this:

https://ibb.co/q9pBhdZ

Is this screenshot visible? This is photoshopped… The arrow is a little bit the same as one angle of the logo. Hope you understand me!

Thanks a lot!!!

Hi! I’ve tried something with css and chevron but I want the angle in the middle a little bit more rounded, just like the logo. How can I do that? This is the code i’ve used right now:

#chevron-creme {
position: relative;
text-align: center;
padding: 0px;
margin-bottom: -40px;
margin-top: -40px;
height: 0px;
width: 100%;
z-index: 1 !important;
background-color: transparent;
}
#chevron-creme:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 51%;
      background: #f5f3ed;
      transform: skew(0deg, 6deg);
}
#chevron-creme:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 50%;
      background: #f5f3ed;
      transform: skew(0deg, -6deg);
}

Thanks!!

if themes use this feature ( and i think it might be time that enfold will get this option too ) make it via svg – and to be precise with inline svg. Because you had to influence the colors in it to adjust it to your section before or after it. These “fill” attribute can be done via css.
The best place on Enfold in Color-Section would be just before, and after the color-sections container – so you will have :

<div class="avia-section  …
  <svg  (  inline for the top ) </svg>
     <div class="container">… </div>
   <svg  ( inline  for the bottom ) </svg>
</div>

this could be done via child-theme functions.php
f.e.
$(‘.avia-section.divider.top1’).prepend(‘<svg class=”top” ……… preserveAspectRatio=”none”></svg>’);
$(‘.avia-section.divider.bottom1’).append(‘<svg class=”bottom” ……… preserveAspectRatio=”none”></svg>’);

it will be best for that on having svgs with no concrete AspectRatio – then you can style it the way you like.
the …….. is your rest of the svg code.

you can see here some examples on using this method: https://webers-testseite.de/guenni/
f.e. see footer area

If you look how elementor f.e. does the trick – it is very similar to that. (and maybe you find some interesting svgs there ;)
to use the code for a nice style svg – you can use transform (rotate 180deg) to use it for the bottom – so one svg for bottom and top.
you can transformY 180deg for a mirror form of that.

The classes above are now nice to have – because if you give to a color-section these classes – it will automatically add the inline svg to your DOM. The rest is Quick CSS to positionen and colorize parts of the svg.

Example Code: put this to your child-theme functions.php

function insert_dividers(){
?>
<script>
(function($){	

	$('.avia-section.divider.top1').prepend('<svg width="100%" class="top" version="1.1" id="faecher" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1500 300" preserveAspectRatio="none"><g fill="#990000"><path class="st0" d="M250,296" fill-opacity=".5"/><polygon class="st1" points="1500,250 750,84.9 0,250 0,0 1500,0 " fill-opacity=".2"/><polygon class="st2" points="1500,191.6 750,81.5 0,191.6 0,0 1500,0 " fill-opacity=".4"/><polygon class="st3" points="1500,133.1 750,78.1 0,133.1 0,0 1500,0 " fill-opacity=".6"/><rect y="0" class="st4" width="1500" height="74.4" fill-opacity="1"/></g></svg>');

	$('.avia-section.divider.bottom1').append('<svg width="100%" class="bottom" version="1.1" id="faecher" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1500 300" preserveAspectRatio="none"><g fill="#990000"><path class="st0" d="M250,296" fill-opacity=".5"/><polygon class="st1" points="1500,250 750,84.9 0,250 0,0 1500,0 " fill-opacity=".2"/><polygon class="st2" points="1500,191.6 750,81.5 0,191.6 0,0 1500,0 " fill-opacity=".4"/><polygon class="st3" points="1500,133.1 750,78.1 0,133.1 0,0 1500,0 " fill-opacity=".6"/><rect y="0" class="st4" width="1500" height="74.4" fill-opacity="1"/></g></svg>');

	})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'insert_dividers');

now go to your ALB and open a color-section:
give a custom-class to this color-section: divider top1 bottom1

put this to quick css:

.divider svg {
    position: relative;
    z-index: 5
}

.divider svg.top {
    top: -2px !important;
}

.divider svg.bottom {
    bottom: -11px !important;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

look now what happens to your front-end.

you see on this svg that there is only one class with a lot oft opacity set. there is a group around all ( normal nomenklatur will be g for group) with a fill color of #990000 ( a red )
this svg has an ID of : faecher
so if you want to change the fill color of that svg ( one side is open and transparent )

#av_section_1 #faecher svg.top g {
fill: #222
}
#av_section_1 #faecher svg.bottom g {
fill: #fff
}

but that depends on your svg –
elementor and divi got mostly simple svgs – with one fill-color and different opacities ( sometimes overlaying layers ) – but only one fill-color.

by the way – this here seems to be in preparation as described : Kriesi Documentation