Customize your Bootstrap tabs with a unique border design

I am currently working on a wizard project where the header design is inspired by the image below. I am utilizing Bootstrap-4 tabs components and the :after pseudo element method on the li element to achieve this effect. However, I am facing a challenge in creating a background with two colors.

Desired Outcome

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

HTML Snippet

<ul class="nav classic-tabs nav-justified white" role="tablist">
    <li class="nav-item">
        <a class="nav-link waves-light active" data-toggle="tab" href="#panel61" role="tab"> Frete</a>
    </li>
    <li class="nav-item">
        <a class="nav-link waves-light" data-toggle="tab" href="#panel62" role="tab"> Pagamento</a>
    </li>
    <li class="nav-item">
        <a class="nav-link waves-light" data-toggle="tab" href="#panel63" role="tab"> Revise e Confirme</a>
    </li>
</ul>

CSS Snippet

&:after {
    content: '';
    border-right: 1px solid #666666;
    display: block;
    height: 100%;
    top: 0;
    position: absolute;
    transform: skewX(-45deg);
}

Current Output

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

twitter-bootstrapcssbootstrap-4

Answer №1

If I were to enhance the appearance of the tabs, I would focus on styling the actual tabs themselves rather than delving into the complexity of styling pseudo-elements.

One technique I would consider is skewing the tabs to the right and then applying an inner span element to skew the text back to a vertical orientation.

To create a 90-degree left side for the first tab, I might use the pseudo:before selector. This same approach could be applied to the final tab as well. While it may require some finesse to get the shadows and borders just right, I believe it is certainly achievable. 

.nav-tabs .nav-item {
  transform: skew(-22.5deg);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, .2);
}

li.nav-item:first-child::before {
  content: '';
  height: 40px;
  background: #fff;
  width: 20px;
  position: absolute;
  transform: skew(22.5deg);
  top: 1px;
  left: -8px;
}

.nav-tabs .nav-item a span {
  transform: skew(22.5deg);
  display: inline-block;
}

<li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab"><span>Home</span></a>
</li>

Check out the Fiddle demo here!

Answer №2

Based on Isherwood's solution, here is a revised version that addresses the first and last tab border issues. It may not be the most efficient solution, but it gets the job done.

Check out the updated design below:

Result https://i.sstatic.net/JbQNy.png

Here's the HTML code snippet:

<div class="tabs-wrapper z-depth-1">
    <ul class="nav nav-tabs nav-justified" role="tablist">
        <li class="nav-item">
            <a class="nav-link active first" data-toggle="tab" href="#frete" role="tab"><span>Frete</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#pagamento" role="tab"><span>Pagamento</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link last" data-toggle="tab" href="#confirmacao" role="tab"><span>Revise e Confirme</span></a>
        </li>
    </ul>
</div>

And here's the corresponding CSS code (written in SASS):

.tabs-wrapper {
    margin-top: 5rem;

    .nav {
      background-color: $cinza;
      padding: 0;

      .nav-item {
        transform: skew(-22.5deg);
        box-shadow: 5px 5px 15px rgba(0, 0, 0, .2);

        .nav-link {
          @include transition(all 1s);
          color: $gray-500;
          background-color: $cinza;

          span {
            font-size: 1.2rem;
            transform: skew(22.5deg);
            display: inline-block;
            padding: 1rem 0;
          }

          &.active {
            @include transition(all 1s);
            background-color: #fff;
            color: $gray-900;
            font-weight: 700;
          }

          &.first {
            &:before {
              @include transition(all 1s);
              position: absolute;
              content: '';
              background: $cinza;
              height: 100%;
              width: 2rem;
              top: 0;
              left: -1rem;
              transform: skew(22.5deg);
            }

            &.active {
              &:before {
                @include transition(all 1s);
                background: #fff;
              }
            }
          }

          &.last {
            &:before {
              @include transition(all 1s);
              position: absolute;
              content: '';
              background: $cinza;
              height: 100%;
              width: 2rem;
              top: 0;
              right: -1rem;
              transform: skew(22.5deg);
            }

            &.active {
              &:before {
                @include transition(all 1s);
                background: #fff;
              }
            }
          }
        }
      }
    }

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

Including Previous & Next Buttons in Product Categories

I have set up the display of category products on the home page using the block below: {{block type="catalog/product_list" template="catalog/product/home_short.phtml" category_id="5" column_count="6"}}. I now want to include previous and next buttons to ...

phpjqueryhtmlcssmagento

Difficulty understanding JavaScript sum calculations

I am currently working on a website project. Seeking assistance to enable an increment of one when clicked. Also need guidance on calculating the total price of items collected in a designated section under "number of items selected". Goal is to display ...

javascripthtmlcsscumulative-sum

Displaying multiple div elements when a button is clickedLet multiple divs be

ISSUE Hello there! I'm facing a challenge where I need to display a div when a button is clicked. The issue arises from having multiple divs with the same class, making it difficult for me to target each individual div... Image1 Image2 Desired Outco ...

javascriptjqueryhtmlcss

Is there a way to determine the dimensions of a pdf file using javascript and capture a snapshot of it for showcasing on a website?

I'm fairly new to HTML/CSS and haven't delved into javascript yet, but I have a good understanding of reading other people's code. Currently, I'm putting together my portfolio website and would like to include my resume on the page in a ...

javascripthtmlcsspdf

Tips on eliminating the gap between two flex items while adjusting their size

Can anyone assist me with my code? Here is the current version: https://i.stack.imgur.com/00RGC.png I want it to resemble this: https://i.stack.imgur.com/JSclD.png You can find all my attempted media queries in the CSS comments at the end. Please let m ...

htmlcss

"Enhance your website with a sleek Bootstrap navigation system featuring dividers and

Need help with creating a Bootstrap nav menu similar to this design made in Photoshop? Wondering about the best way to position the logo and create dividers between menu items like shown in this image. Here's the HTML code currently being used: & ...

javascriptjqueryhtmlcsstwitter-bootstrap

Storing a selected date from a Bootstrap datepicker into a MySQL database with JSP

I am currently facing an issue while trying to insert a date into a MySQL database through JSP. The date is being accepted using a Bootstrap date picker. However, I am encountering an unparsable date error despite trying to use the 'datetime' dat ...

mysqljspbootstrap-4

How can you call a function in JavaScript based on a condition?

Is there a way to conditionally truncate text using a function called Truncate only when the offsetHeight of the left div with class demo is greater than the offsetHeight of the right div? If this condition is not met, then simply return the original conte ...

javascripthtmlcss

Using JavaScript to implement CSS3 with multiple background images

Is there a way to programmatically define multiple background images in CSS3 using JavaScript? While the common approach would be: var element = document.createElement( 'div' ); element.style.backgroundImage = "url('a.png') 0 100%, ur ...

javascriptcssbackground

When it comes to printing, the @Media CSS rule

I have a specific structure on my HTML page: <html> <head></head> <body> <nav> .... navigation menu </nav> <div> <div></div> <div class="to-print"> <h2>Th ...

htmlcssprintingmedia

Content in an adaptable image map and its regions

I have implemented an image map structure like this. <div class="container"> <div class="row"> <div class="col-lg-12"> <img src="..." style="width: 100%;" usemap ...

jqueryhtmlbootstrap-4imagemap

Implementing div elements in a carousel of images

I've been working on an image slider that halts scrolling when the mouse hovers over it. However, I'd like to use div tags instead of image tags to create custom shapes within the slider using CSS. Does anyone have any advice on how to achieve th ...

javascripthtmlcss

Connect AngularJS with Bootstrap Popover for seamless data binding

I am currently working on dynamically populating the data-title and data-content of a Bootstrap popover using JSON data generated by an AngularJS controller. Snippet from Controller: $scope.popoverContent = {name: {title: "title", content: "content"}} S ...

angularjstwitter-bootstrap

Width of ListBox Item

How can I adjust the width of items in my RadListBox that are being inserted programmatically to prevent multiple items from displaying on a single line? Currently, the items are added to the listbox in C# code like this: rlbAssigned.Items.Add(new RadLis ...

asp.netcsstelerik

Inject CSS styles into panelgrid on-the-fly

How can I pass a color code property fetched from ebean to a css function? <h:panelGrid id="testpanel" columns="#{message.no_of_columns}" rows="#{message.no_of_rows}" styleClass="dynamicGrid"> <c:forEach items="#{bLDashBoar ...

cssjsf

Error: The OOP class value for translateX in the Web Animation API is returning as undefined

I'm currently working on a basic animation project using JavaScript. I have utilized the Animation class from the Web Animation API. My goal is to create multiple instances of this class in order to animate different elements with varying values and r ...

javascriptcsscss-animationstypescriptweb-animations-api

An unexpected error has occurred: Module not found - ui.bootstrap.alert in line 17 of angular.min.js

Check out this snippet of HTML and AngularJS code <html ng-app="myApp"> <head> <title>My Angular App</title> <link href="Styles/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="Scripts/an ...

twitter-bootstrapangularjsangular-ui

Avoid automatic background resizing to match the full width of the header text

I've been trying to use CSS to style my <h1> element in a specific way, but it seems the default browser behavior is getting in the way: https://i.sstatic.net/oRR5N.png Despite my efforts, the browser continues to display it like this: https: ...

htmlcss

What is the best way to navigate my Page while my Dialog Component is displayed?

Is there a way to enable scrolling on the background when a dialog component opens up? By default, scrolling is disabled when the dialog appears. How can we allow scrolling in the background? Here is the code snippet: import React, { useState } from &apos ...

cssreactjsmaterial-uimaterial-designstyled-components

Why is the col-1 in Bootstrap stacking up instead of flowing horizontally as intended?

Check out my HTML/CSS code below: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <d ...

cssbootstrap-4