How to position SVG clip-path using CSS and only clip one edge of clipped element

Question

I am trying to use an SVG mask and the CSS clip-path property to make some "ragged" section dividers on a website.

I need to be able to apply ese "ragged" bottom edges to sections/rows of any height, and so I need to be able to position and hopefully scale them as needed, depending on the height of the section, and hopefully the viewport width as well.

I am able to add the SVG mask using the clip-path: url(#svg-id); method — so far so good!

I have not been able to figure out how to position the SVG (e.g. move up or down the page) using CSS, but I did figure out that I can add a transform="translate(X,Y);" attribute to the svg path itself in the HTML as workaround to position the SVG.

The issue now is that when if I move the SVG down the page using this method, it begins to mask off the top edge of the masked element too — behaving like a "window" and masking off everything outside of it, as opposed to just masking the masked portion of the SVG.

Here is a codepen to show where I am at so far: https://codepen.io/moonweasel/pen/PomJgej

I would appreciate any pointers anyone can give me on how to use the SVG to only mask off the bottom edge of the element it is applied to, and leave the rest of the element showing, and also if possible how to position the SVG using CSS instead of having to add attributes to the HTML SVG path.

Thanks for the link. The main question in that post is using a raster image for the mask, so does not help me figure out my issue, which is how to position an SVG clip-path without it cutting off portions of the image outside the SVG. (There is also an answer related to SVGs on that post, but it does not provide any CSS or address the positioning issue either.) — dubyaD, Jul 22 '21 at 21:37

Sam Miller · Answer 1 · 2022-06-22T04:56:03.087

Your question is a bit old. I am curious if you came up with a solution.

Using before/after pseudo-class and a different wavy svg, I was able to create the section divider effect you were looking for, still using clip-path (reference tutorial: https://ryandejaegher.com/how-to-make-wavy-section-transitions-in-squarespace-7.1/#step-3-adding-a-clip-path-to-your-svg).

body {
  margin: 0;
  background-color: lightblue;
}

h1 {
  margin: 0;
}

section {
  position: relative;
  padding: 2rem 2rem 1rem 2rem;
}

.section1 {
  background: orange;
}

.section2 {
  background: pink;
}

.section3 {
  background: purple;
}

section:nth-of-type(2):before {
  --bg-color: orange;
}

section:nth-of-type(3):before {
  --bg-color: pink;
}

section:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 20px;
  top: 0;
  left: 0;
  background: var(--bg-color);
  /* Use the ID from your SVGs Clip Path*/
  clip-path: url(#waveDown);
}

<body>
  <main>
    <section class="section1">
      <h1>Hello World.</h1>
      <p>This section has a ragged bottom edge, accomplished using an SVG clip-path as a mask.</p>

      <p>What I want is to only mask off the BOTTOM EDGE of the orange section, so that the orange still extends to the top of the screen, and so that I can place the mask on a section of any height and it be able to mask only the bottom edge of the section.</p>

      <p>I am able to use transform="translate(x,y)" on the svg path to move the SVG <strong>higher or lower</strong>, but when I do that <strong>it also starts masking off the top of the parent container</strong>, as if the SVG is a "window" that masks off everything outside it, instead of only masking off the bottom edge section which is what is drawn in the SVG… </p>
    </section>

    <section class="section2">
      This section (.section2) can be an image, text, or whatever.
    </section>

    <section class="section3">
      This section (.section3) can be an image, text, or whatever.
    </section>
  </main>
  <p>Body's background color is blue.</p>

  <svg viewBox="0 0 1920 120" class="wave" fill="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <clipPath id="waveDown" clipPathUnits="objectBoundingBox" transform="scale(0.000520833 0.008333333)">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M0 51.3323L40 59.8877C80 68.4431 160 85.5539 240 82.7021C320 79.8503 400 57.0359 480 45.6287C560 34.2216 640 34.2216 720 37.0733C800 39.9251 880 45.6287 960 51.3323C1040 57.0359 1120 62.7395 1200 62.7395C1280 62.7395 1360 57.0359 1440 68.4431C1520 79.8503 1600 108.368 1680 116.924C1760 125.479 1840 114.072 1880 108.368L1920 102.665V0H1880C1840 0 1760 0 1680 0C1600 0 1520 0 1440 0C1360 0 1280 0 1200 0C1120 0 1040 0 960 0C880 0 800 0 720 0C640 0 560 0 480 0C400 0 320 0 240 0C160 0 80 0 40 0H0V51.3323Z" fill="black" />
      </clipPath>
    </defs>
  </svg>
</body>

How to position SVG clip-path using CSS and only clip one edge of clipped element

1 Answers1