What is the best way to apply rectangle shape styling CSS to a highlighted tab, as illustrated in the screenshot below?

https://i.sstatic.net/XxlXE.png

I am struggling to create a tab similar to the one in the image above. Any suggestions on how I can achieve this?

I attempted using the code snippet below to create a sample shape, but it did not produce the desired outcome. 

#demo:before {
        border-width: 10px;
        border-top-color: #ccc;
        border-left-width: 50px;
        border-right-width: 0;
        left: 0;
    }

#demo:after {
        border-width: 2px;
        border-top-color: #777;
        border-left-width: 50px;
        border-right-width: 0;
        left: 0;
    }
csshtmlangular-ui-bootstrap

Answer №1

If you want to achieve this effect, simply include an after pseudo element in the a element.

<ul>
  <li><a class="active" href="#">Notifications</a></li>
  <li><a href="#">Reports</a></li>
</ul>

ul {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style-type: none;
  background-color: blue;
  float: left;
}

ul li {
  float: left;
}

ul li + li {
  border-left: 1px solid rgba(255, 255, 255, .5);
}

ul li a {
  display: block;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  font-family: helvetica;
  padding: 20px 16px;
  position: relative;
}

ul li a.active:after {
  content: "";
  display: block;
  background-color: #fff;
  height: 10px;
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
}

For a live example, check out this jsFiddle link:

https://jsfiddle.net/abc123xyz/9/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the steps to execute a filter operation on a table by utilizing two select box values with jQuery?

I have a challenge with two dropdown menus. One contains names and the other subjects, along with a table displaying information in three columns: name, subject, and marks. I would like to implement a filter based on the selections in these two dropdowns. ...

javascriptjqueryhtml

Choose an element for styling only if it contains a child element with a particular class

Looking to adjust padding based on specific child class <div class="container page-content"> </div> The page-content class typically includes padding: .container.page-content{ padding-top: 160px; } However, there is a special case wher ...

htmlcsscss-selectors

The table does not recognize any of the CSS classes when the TAG is inputted inside

I am currently working on a challenging form for players to save their personal character sheets in a database. To achieve this, I am incorporating numerous Input TAGs and utilizing tables for layout purposes, ensuring an organized and efficient design. E ...

cssinputhtml-tableuser-agent

I keep getting double results from the Multiple Checkbox Filter

Currently, I am facing an issue with a checkbox filter on a product page that I'm developing. The filter is functioning correctly, but I encounter duplicate results when an item matches multiple criteria. For instance, if I select both 'Size 1&ap ...

javascripthtmljquerycheckboxfilter

Firefox does not support responsive tables, while Chrome does

Firstly, let's take a look at this Fiddle by resizing in Firefox and Chrome. I also attempted to troubleshoot the issue mentioned here: Why do Firefox and Opera ignore max-width inside of display: table-cell?, but unfortunately had no success. table ...

htmlcss

CSS - Techniques for stacking floated right divs on smaller screens

On a large screen, my widget looks perfect, but when I switch to mobile view, it becomes problematic. The widget consists of a title section with two additional fields that need to be floated to the right and occupy only as much width as the text inside t ...

htmlcssmobileresponsive-design

What is the best way to obtain SAPUI5 Explored designs?

I am working on implementing a sap.ui.Table in my project, similar to the one showcased in the SAPUI5 Explored app. The table I am trying to create should allow for multi-selection of items using checkboxes on the left side. However, after downloading th ...

javascriptcsssapui5

I successfully crafted a key frame animation in Blender with no use of bones, but now I am unsure how to implement it in Three.js. While I am familiar with working with bones, this

This model is used to demonstrate boneless animation. I need advice on the appropriate format for exporting it, as I have encountered difficulties trying to export this specific animation as a .json file. https://i.sstatic.net/Dt2Yq.png ...

htmlthree.jsblender

Creating a three-column layout with position fixed in the center

I'm struggling with achieving a maximum width of 400px for the entire set of three columns and centering them. ---------------------------------------------------- | | | |----------------------------- ...

htmlcss

"Switching Classes with a Click Event: A Step-by-

This script is designed to work with SoundCloud's widget in order to enable remote text buttons. I am attempting to modify it so that it functions as a remote for an image button that toggles between different pictures for pause and play, rather than ...

javascriptcssjquery

Display button in Django template based on user's group level

In my application, there are 3 groups with different permissions: viewer, editor, and creator. I need to display the appropriate buttons based on these permissions. For viewers, they can only see lists and details. Editors have viewer permissions plus th ...

htmldjangoview

Issues with the forward slash character

After creating a form and submitting it, I noticed that it would just redirect back to the same form page. However, when I changed the value of a variable (to "m=files&a=addedit"), it kept creating a new forward slash symbol. Below is the code snippet ...

phphtml

Permit the use of the "&" character in mailto href links

When including an email mailto href link and using a & character in the subject, it can cause issues with code rendering. For example, if the subject is "Oil & Gas," only "Oil" may show up. In most cases, you could simply replace the & with th ...

javascriptphphtmlhrefmailto

An interesting approach to utilizing toggle functionality in JQuery is by incorporating a feature that automatically closes the div when

Currently, I am utilizing JQuery's toggle function to slide a ul li element. However, my desired functionality is for the div to close if someone clicks outside of it (anywhere on the page) while it is in the toggle Down condition. Below, you'll ...

javascriptjqueryhtmlcss

arranging <li> elements in alphabetical order

I'm looking for a way to alphabetically sort an unordered list while still keeping the outer html intact. My current method sorts the list alphabetically, but it only reorganizes the inner html of the list elements and not the entire element itself. T ...

javascriptjqueryhtmlxmlsorting

Highlighting the active menu item using PHP

I am trying to create a dynamic menu with an active class for each page. But I seem to be struggling and can't figure out what mistake I've made. Thanks in advance for any help! <li class="nav-item <?php echo $home_menu_class; ?>&q ...

phphtmlmenu

What is the method to create an animation that radiates from the center point?

I have developed animations featuring diagonally moving circular patterns. div { width: 100%; height: 100vh; background-image: radial-gradient(#85c79f 7px, transparent 7px), radial-gradient(#fc536c 7px, transparent 7px), radial-gradient(#e99377 7p ...

csscss-animations

Utilizing jQuery to seamlessly animate decimal values

Currently facing a challenge while trying to animate a number from 0 to 36.6. The issue is that the end value gets rounded up to 37 instead of displaying as 36.6, which you can observe in this fiddle: http://jsfiddle.net/neal_fletcher/0f3hxej8/ Required ...

javascriptjqueryhtmlcssanimation

Struggling to modify a string within my React component when the state is updated

Having a string representing my file name passed to the react-csv CSVLink<> component, I initially define it as "my-data.csv". When trying to update it with data from an axios request, I realize I may not fully understand how these react components w ...

htmlreactjstypescriptaxioscomponents

Trouble with CSS3 Menu Layout and Gradient Display Issues

My task is to replicate this menu: I'm having trouble creating the gradient. Completed Why can't I see it in my code? http://jsfiddle.net/Vtr6d/ Here's what I currently have: CSS: .mainOptions{ float:left; margin:0 20px 0 20px; ...

htmlcssgradient