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
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
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
