- Method 1: Styling two pseudo-elements.
- Method 2: Using the box-shadow of an above circle
Outside Curve: An outside curve is the rounded outward corner through which we connect our active element to any other element of the document. Let’s see an example:
We are going to make a ‘Curved Outside in Active Tab in Navigation Menu’ using the following steps:
Make a Navigation Menu With an active tab:
Now before going to the ‘Outside Curve’ part we are going to create a simple navigation menu using HTML and CSS and make a default active item inside the navigation menu in the following steps :
- Create a div element of class navigation.
- Create an unordered list inside the div.
- Add the icons and links you want to as a list item of the unordered list.
- Choose a list item for our default active item. Add a class active to this item.
- Add custom CSS, background and font to make our navigation good-looking.
- Add the jQuery library into our HTML document.
- Add a click event to all the list items of the navigation menu.
- Prevent the default to prevent the restoration of the previous state.
- Inside that function remove the ‘active’ class from the existing active list item.
- Add the ‘active’ class to the clicked list item.
Method 1: Styling two pseudo-elements
- Add two extra <b> tags at the top of the <a> tag inside the list element. These will perform as pseudo-elements.
- Add a class of ‘left-curve’ to the first <b> tag and ‘bottom-curve’ to the second <b> tag.
- Create a rectangle at the left using the <b> tag with class ‘left-curve’.
- Add a border-radius to the elements of this class using css : : before selector.
- Make the display of the left-curve as ‘none’.
- Make the display a ‘block’ when the link is active.
- Repeat the same process for the ‘right-curve’ (the second <b> tag).
Method 2: Using the box-shadow of an above circle
- Create a circle at the top and at the bottom of the active link using ::before and ::after selectors.
- Create a box-shadow of the circle with the same parameters.
- Make the color of the circle the same as the background color of the navigation bar and the color of the box-shadow same as the color of the outside div. Now the active link is curved outside.