Creating triangular side tabs with borders using CSS and HTML styling

I'm looking for a way to create triangle side navigation tabs similar to this example. I attempted using :after pseudo-element in my CSS:

.tabs input + label:after{
content:"";
float:left;
position:absolute;
top:0;
right:-12px;
width:0;
height:0;
border-top: 15px solid black;
border-left: 11px solid transparent;
border-bottom: 16px solid black;    
}

Unfortunately, it didn't turn out as expected and looked like this instead.

I'm hoping to achieve a triangle side with a border of 1px. Thank you for any assistance, and I would appreciate it if you could provide a JSFiddle. +1

htmlcsstabs

Answer №1

  • To create two triangles on top of each other using borders with a darker color, use a ::before pseudo-element.
  • Then, hide the unnecessary parts by adding an ::after pseudo-element with the same color as your elements. Position it 1px less to the left for a 1px wide arrow effect.
  • For the tip of the arrow, apply a 1px box-shadow to the right edge of both pseudo-elements with the same color. Adjust the shadow if you want a wider arrow.
  • Make sure to exclude :first-of-type to prevent having an arrow before the first element.

Code:

li:not(:first-of-type)::before, li:not(:first-of-type)::after{
  content:'';
  display: block;
  position: absolute;
  top: 0;
  left: -10px;
  width:0;
  height:0;
  border-style: solid;
  border-width: 15px 0 15px 10px;
  border-color: blue transparent;
  box-shadow: 1px 0 0 blue;
}
li:not(:first-of-type)::after{
  left: -9px;
  border-color: lightblue transparent;
  box-shadow: 1px 0 0 lightblue;
}

Fiddle: https://jsfiddle.net/ilpo/r5enysmf/

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

Trouble with the query waypoints extension in a simple demonstration

Can anyone help me figure out why the basic example from the waypoints plugin isn't working for me? Here's a link to the jsfiddle I created: http://jsfiddle.net/ZA8bd/2/ CSS .block1 { margin-top:30px; width: 400px; background: red; ...

javascriptjqueryhtmlcssjquery-waypoints

What is the best way to adjust the dimensions of a textfield in Vuetify by altering its width and height?

Is there a way to adjust both the width and height of the <v-text-field>tag? I attempted to modify it using .css, but it seems to only affect certain parameters, leaving large white spaces on my page. This is the method I have tried so far: <te ...

cssvue.jsvuejs2vue-componentvuetify.js

Issue with jQuery Cycle causing images not to load in IE all at once, leading to blinking

When using the jQuery Cycle plugin in IE8 (as well as other versions of Internet Explorer), I am encountering an issue. My slideshow consists of 3 slides, each containing a Title, Description, and Image. The problem arises when viewing the slideshow in I ...

javascriptjqueryhtmlcsscycle

A guide on wrapping text within a Material-UI MenuItem

I am struggling to display text in a popover in multiple lines for UI reasons. I have tried updating the code but so far, I have not been successful. Any suggestions? <Popover anchorEl={target} open={open} anchorOrigin={{ horizontal: 'middle& ...

cssreactjsmaterial-ui

Flickity remains in plain sight on desktop devices

I am trying to hide the flickity slider on desktop and larger devices. I have followed the instructions in the documentation, but for some reason, it's not working as expected. Here is how the div looks: <div class="w-full flex pl-4 pb-16 overflo ...

javascriptcssvue.jsflickityvue-flickity

Resizing a floated div causes the image to break out

My webpage has a container div with two floated left divs inside, positioned side by side. The right div contains a YouTube video and an image. However, when I resize the page, the video and picture flow out of the containing floated div instead of dropp ...

htmlcss

My goal is to develop a PHP photo gallery using either an array, session variables, or cookies

I am in need of a solution for my issue. https://i.stack.imgur.com/Xe65l.png The image shows the front end, and I require a corresponding function to be developed for it. ...

phpjqueryhtmlcsswordpress

Connecting an HTML box to a JavaScript function for the desired outcome: How to do it?

My goal is to connect the input box with id="b" (located inside the div with id="but1") with a JavaScript function that calculates values within an array. Although my junior logic review didn't detect any issues in the code, what mistakes could I have ...

javascripthtml

Stop images within contenteditable divs from being easily dragged and dropped into unrelated div elements

In order to maintain data integrity, I have implemented a rule where users are allowed to drag images within a specific div. Later on, I need to retrieve the positions of these images within the div. However, it is crucial for my business requirements tha ...

htmlcss

Smooth transition of an arrow moving in a continuous loop using CSS animations

I am attempting to create a seamless loop of a single arrow within a div. My approach involves using two SVG arrows in such a way that when the top part of the first arrow is hidden, the corresponding section of the second arrow should be displayed. This ...

htmlcss

The source of the image gets disrupted when it is not on the homepage

My images are stored in the directory images/icons/artist_default.png On the homepage, the image is displayed with this path: http://localhost:7777/images/icons/artist_default.png However, on a user's page like http://localhost:7777/user/giorgio-m ...

htmlcss

Presenting data in various formats

I've got a JSON file with a list of data that includes months and years. I want to display all the months, but have the year only appear once in a big block area. Here's an image example: https://i.stack.imgur.com/Ps3OF.png The image demonstrates ...

htmljsonangulardata-manipulation

What is the best way to implement a collapsible menu in a fixed sidebar for mobile devices using Bootstrap 4?

I have been searching extensively, but I have yet to come across the precise solution for what I am trying to achieve. Being new to coding, I believe that the answer is probably simpler than I realize. My goal is to develop a sidebar navigation that remai ...

htmlbootstrap-4navigationnavsidebar

Display the page number when printing using CSS

I am struggling to display the page number at the bottom of my printable document. I followed a source on Stack Overflow, but unfortunately, it did not work for me. My current CSS attempt to achieve this is as follows: body { text-align: justify; } /* ...

htmlcss

Are all elements still displaying the menuBar style? Using the PHP include function, <?php include... ?>

Here is the Menu Bar code I am using: <!DOCTYPE html> <html> <link href = menuBarStyle.css rel = "stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <div class = "menu"> ...

htmlcss

Enhance your SVG progress circle by simply selecting checkboxes

I have a unique system with 5 checkboxes that act as a To-Do list. When I click on each checkbox, the circle's diameter should progressively fill up in increments of 1/5 until all 5 checkboxes are completed. The order in which the checkboxes are click ...

javascripthtmlcsssvgcheckbox

Tips on customizing the appearance of the dropdown calendar for the ngx-daterangepicker-material package

Is there a way to customize the top, left, and width styling of the calendar? I'm struggling to find the right approach. I've been working with this date range picker. Despite trying to add classes and styles, I can't seem to update the app ...

javascriptcssangulartypescriptangular-material

The sidebar remains fixed in height and does not expand vertically

Need Help: My sidebar won't expand in height when I update content. Is there a way to make it adjust using just HTML and CSS? html code: <div id="main"> <section> More text goes here... </section> <div id="sideb ...

htmlcsssidebar

The sub-menu positioning feature functions properly in Chrome and Safari, but is not compatible with Internet Explorer and Firefox

Working on a website for a gaming community, known as http://www.quad-gaming.com/. All is running smoothly except for the dropdown menu under "Login" on the right side of the navigation bar. It behaves properly in Chrome and Safari, but in IE and Firefox, ...

htmlcssmenunavigationsubmenu

Showing Predefined Date on an HTML Form in an iOS Application

Is there a method to dynamically show the current date within the button that triggers the date picker in an HTML form on an iOS device? This is what currently appears: This is what I want it to automatically display: Below is the code I have implemente ...

javascripthtmliosformsdate