- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hello,
I would appreciate it if someone could take a look at something I am stuck on. I am trying to create the following nav and search bar design:
I made a quick codepen mockup to demonstrate where I am stuck:
I am trying to place the search bar over the nav and under the slideshow, where the search box keeps the curve of the nav.
I have played with z-indexes and haven’t had any luck. Any ideas or thoughts would be appreciated.
Thanks!
Have you tried a CSS clip-path
over the search element?
.search-btn {
/* stuff */
clip-path: polygon(50% 0%, 100% 0%, 100% 95%, 20% 92%, 30% 92%, 0% 92%, 0% 0%);
}
I have not tried clip path. I will play with this, thank you!
BTW: note the SVG in the HTML for the clip-path. There is a web-app “Clippy” by Bennett Feelly that’s very useful for playing with CSS clip-path. Also any blogpost on the subject by Sara Soueidan is recommended.
Take care, have fun!