Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1467918

    We have an image (not a background image) that is working as a faux-mask on the slider so it appears to have a curved bottom.

    Screenshot-2024-09-27-085633

    However, if the screen size is bigger than 1920×1080, it simply stops.

    Is there a way to make this image stay anchored to the bottom, but stretch horizontally if the resolution is greater than 1920×1080?

    #1467931

    Can I have a look at this page? ( if you could not post the link here – send me an e-mail)
    because I think it’s easier to achieve this in another way.

    f.e. this way: https://webers-testseite.de/divider-on-sliders/

    at the moment i try to use the given curve divider – that does not fit because it is a konvex Curve … so be a bit patient.
    we can use the konvex Curve of Enfold – but we use than that negative option (invert) – in this way we had to differ on how to transform the divider svg.
    so snippet gets an if / else clause now.

    • This reply was modified 1 day ago by Guenni007.
    #1467949
    #1467987

    a different much easier way is using clip-path on those slider wrappers by an inline svg file ( path has to be in relative values – convert for example here: link )
    but disadvantage: you have to synchronize the background-color of that section to the next section – otherwise you got a gap (see green area on example page)

    <svg class="bottom-curve">
      <clipPath id="bottom-curve" clipPathUnits="objectBoundingBox"><path d="M1,0.9 s-0.25,0.1,-0.5,0.1 S0,0.9,0,0.9 V0 h1 v0.9"></path></clipPath>
    </svg>
    
    <style>
    .bottom-curve > div {
      -webkit-clip-path: url(#bottom-curve);
      clip-path: url(#bottom-curve);
    }
    </style>

    you see how this works – give then the custom-class: bottom-curve to the slider element or to the color-section.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.