Kevin Powell - Community•16mo ago

Best approach to add an SVG image positioned bottom of a ClipPath.

Hey guys and gals, Firstly, thanks for taking the time to checkout my question. Any help or insight is appreciated, spent a good part of today with no success unfortunately. We're currently building a basic portfolio site for a client. The client has provided a UI of what they want their website to look like (don't judge). The Problem: We're having issues developing the header to work and look as the client has requested. The header has a custom curve in it, it is sticky, and it obviously needs to be responsive. We have achieved this using SVG Clip Paths. The remaining issue is that the client has a customised border line that needs to sit at the bottom of the header. For the life of us, we cannot seem to nail this. Staging Link: I have uploaded the work to our staging server, see below. https://dev.websmith.studio/tszxstudio/ The line under the header, is currently being done by wrapping the header in a container and using a filter drop-shadow. Unfortunately, this is not sufficient. We need this line to display there ' https://dev.websmith.studio/tszxstudio/assets/img/line-path.svg'. Thank you again, Ben 🧡

5 Replies

Naa•16mo ago

Hi Ben, following a video of Kevin's, using this image as a mask-image on a before/after pseudo element seems a way to go. Something like:

header {
  position: relative; 
}
header::after {
  position: absolute;
  content: '';
  width: 100%;
  background: black; // whatever colour you want the line to be
  mask-image: url('../path/to/line-path.svg');
  height: 2rem; // whatever height works at different media sizes;
  bottom: 0;
}

header {
  position: relative; 
}
header::after {
  position: absolute;
  content: '';
  width: 100%;
  background: black; // whatever colour you want the line to be
  mask-image: url('../path/to/line-path.svg');
  height: 2rem; // whatever height works at different media sizes;
  bottom: 0;
}

Naa•16mo ago

I believe this was the video https://www.youtube.com/watch?v=hWGgw1K-i8Y

Kevin Powell

YouTube

Spice up your site | Easy waves, angles, & other creative shapes wi...

The web is made of boxes, and boxes are bland, boring, and all look the same. We can spice things up with bringing in some angels, shapes, and waves like these, which makes things a heck of a lot more interesting. In this tutorial, we’ll see how we can take one of those typical, boring layouts and make it spicy by using a few different CSS tec...

websmith•16mo ago

Fantastic. I will have a look later tonight. Thank you very much! 🙂

Naa•16mo ago

No worries :) hope it helps.

websmith•16mo ago

Gave it a crack, with no luck. Probably for more traditional shapes it works. However, I need this to be an image. Might have a try including 2 x clippaths in the one SVG

Gaming

Programming

Best approach to add an SVG image positioned bottom of a ClipPath.