Need a curve on top of app bar when selected
I am creating one
mobile appbar
. I am trying to create a curve
above when user selects it.i created another curve div. but that is separate div. so it hasn't worked out. I tried but I don't how to implement it. Can anyone help me with that. I need a curve above when the user clicked on the item
Here's the code:
![No description](https://cdn.answeroverflow.com/1264903962696355921/Xnip2024-07-22_16-40-37.png)
2 Replies
I suspect that the main issue you would have with a design like this is the inverse rounded borders. There are several ways that these can be achieved using radial gradients etc however this is further complicated by the need to have a border.
I suspect that the simplest way would be to use an SVG image made specifically for your design.
I have put together a quick demo of how it could be done using an SVG https://codepen.io/cbolson/pen/mdZEENy
Note - the SVG itself could be better but serves for the purpose of the demo.
I didn't look too closely at your code so didn't really look at how you wanted to hide/display/animate the top cuve. In my demo I opted to slide it along the top based on the nav item with the "active" class.
@Chris Thank u so much.. I will use this code in my react