Customize the borders of breadcrumb elements with unique coloring

I've been working on creating a breadcrumb that resembles the design shown in this https://i.sstatic.net/lRcIN.png

I have made some progress, but I'm struggling to add the border colors to the <li> items. Can anyone help me with this? Here is the code I have written so far:

#breadcrumbs{
    overflow: hidden;
    width: 100%;
    list-style: none;
    margin-bottom: 0px;
  }

  #breadcrumbs li{
    float: left;
    margin: 0 .3em 0 1em;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 1px;
  }

  #breadcrumbs a{
    background: #eef6f8;
    padding: .4em 1em;
    float: left;
    text-decoration: none;
    color: #000;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    position: relative;
  }

  #breadcrumbs > li.active > a{
    background:#00305e;
    color: #fff;
  }

  #breadcrumbs a:hover{
    background: #99db76;
  }

  #breadcrumbs a::before{
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -1.5em;
    border-width: 1.5em 0 1.5em 1em;
    border-style: solid;
    border-color: #eef6f8 #eef6f8 #eef6f8 transparent;
    left: -1em;
  }

  #breadcrumbs li:first-child  a::before{
border-color:#eef6f8;
  }
  #breadcrumbs li.active > a::after{
    border-left: 1em solid #00305e;
  }

  #breadcrumbs li.active:first-child  >  a::before{
    border-color:#00305e;
      }

  #breadcrumbs a:hover::before{
    border-color: #99db76 #99db76 #99db76 transparent;
  }

  #breadcrumbs a::after{
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -1.5em;
    border-top: 1.5em solid transparent;
    border-bottom: 1.5em solid transparent;
    border-left: 1em solid #eef6f8;
    right: -1em;
  }

  

  #breadcrumbs a:hover::after{
    border-left-color: #99db76;
  }

  #breadcrumbs .current,
  #breadcrumbs .current:hover{
    font-weight: bold;
    background: none;
  }

  #breadcrumbs .current::after,
  #breadcrumbs .current::before{
    content: normal;
  }
<head>
<style>

</style>
</head>
<body style="background-color:wheat">
<div class="crumbs-menu">
  <ul id="breadcrumbs">
      <li class="active"><a href="">Medical</a></li>
          <li><a href="">Dental</a></li>
           <li><a href="">Vision</a></li>
            </ul>
  </div>
</body>

htmlcssbootstrap-4

Answer №1

A quick and easy way to achieve the desired effect without altering your existing code is by simply applying a drop-shadow filter:

#breadcrumbs {
  overflow: hidden;
  list-style: none;
  margin-bottom: 0px;
}

#breadcrumbs li {
  float: left;
  margin: 0 .3em 0 1em;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 1px;
}

#breadcrumbs a {
  background: #eef6f8;
  padding: .4em 1em;
  float: left;
  text-decoration: none;
  color: #000;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  position: relative;
  filter:drop-shadow(2px 0px 0px red); /* added (2px of red border) */
}

#breadcrumbs>li.active>a {
  background: #00305e;
  color: #fff;
}

#breadcrumbs a:hover {
  background: #99db76;
}

#breadcrumbs a::before {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-width: 1.5em 0 1.5em 1em;
  border-style: solid;
  border-color: #eef6f8 #eef6f8 #eef6f8 transparent;
  left: -1em;
}

#breadcrumbs li:first-child a::before {
  border-color: #eef6f8;
}

#breadcrumbs li.active>a::after {
  border-left: 1em solid #00305e;
}

#breadcrumbs li.active:first-child>a::before {
  border-color: #00305e;
}

#breadcrumbs a:hover::before {
  border-color: #99db76 #99db76 #99db76 transparent;
}

#breadcrumbs a::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid #eef6f8;
  right: -1em;
}

#breadcrumbs a:hover::after {
  border-left-color: #99db76;
}

#breadcrumbs .current,
#breadcrumbs .current:hover {
  font-weight: bold;
  background: none;
}

#breadcrumbs .current::after,
#breadcrumbs .current::before {
  content: normal;
}
<body style="background-color:wheat">
  <div class="crumbs-menu">
    <ul id="breadcrumbs">
      <li class="active"><a href="">Medical</a></li>
      <li><a href="">Dental</a></li>
      <li><a href="">Vision</a></li>
    </ul>
  </div>
</body>

Answer №2

If you want to enhance the design by adding a span element for the right arrow, this is how you can achieve it.

<ul id="breadcrumbs">
    <li class="active">
        <a href="">Medical</a>
        <span class="right-arrow"></span>
    </li>

    <li>
        <a href="">Dental</a>
        <span class="right-arrow"></span>
    </li>

    <li>
        <a href="">Vision</a>
        <span class="right-arrow"></span>
    </li>
</ul>

To create two shapes for the right arrows with different colors using clip-path, you can follow these steps.

For more information on clip-path, refer to the resources provided in MDN docs or experiment visually here.

#breadcrumbs li:not(.active) a:hover + .right-arrow {
    --primary-color: #99db76;
}

.active .right-arrow {
    --primary-color: #00305e;
    --secondary-color: green;
}

.right-arrow {
    --polygon: polygon(0 0, 5px 0, 100% 50%, 5px 100%, 0 100%);
    --primary-color: #eef6f8;
    --secondary-color: #00305e;

    position: absolute;
    top: 0;
    right: -1em;
    height: 100%;
    width: 1em;
}
...
#breadcrumbs .current::after,
#breadcrumbs .current::before {
  content: normal;
}
<body style="background-color: wheat;">
  <div class="crumbs-menu">
    <ul id="breadcrumbs">
      <li class="active">
        <a href="">Medical</a>
        <span class="right-arrow"></span>
      </li>

      <li>
        <a href="">Dental</a>
        <span class="right-arrow"></span>
      </li>

      <li>
        <a href="">Vision</a>
        <span class="right-arrow"></span>
      </li>
    </ul>
  </div>

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

Tips for creating a website loading screen that allows users to fully immerse themselves in the experience

I am looking to improve the visibility of the loading screen that I have created. Ideally, it should last around 3-5 seconds using JQuery, as it is already in use on the website. Below is the code snippet: Additionally, I am not very familiar with JQuery, ...

javascripthtmljquerycssweb

Bootstrap dropdown menu appears to be frozen in the open position, unresponsive to the button click

I am currently working on developing a straightforward sign-in program to be used on a podium at my office. The main purpose of this program is to allow clients to input their name, username, description of their issue, and then click submit. Subsequently, ...

javascriptnode.jsbootstrap-4electrondropdown

Conflicting styles occur when trying to align images using both TailwindCSS and CKEditor 5

My current project involves using Laravel 10 with Vite as the asset builder and Tailwind for CSS. The app.css file contains the following code: @tailwind base; @tailwind components; @tailwind utilities; I am currently implementing a text editing feature u ...

cssckeditortailwind-cssckeditor5laravel-10

Issues with DnD functionality in Chrome, images not visible during dragging operation

At first, I encountered an issue with event.dataTransfer.setDragImage not functioning properly in Chrome. This can be seen in the example below: http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=html5-59.htm Upon further investigation, I noticed th ...

htmlgoogle-chromedrag-and-dropwebkitchromium

Placing content inside a text area upon clicking a div element

I am currently developing a submission system and I want to implement a feature where clicking on a div will insert certain text (like [b][/b]). Here is an example of what we are working with: <div class="insertBBC" title="Bold Text" onClick="moveNumbe ...

javascriptphphtmltextfield

Ways to update list item text with jQuery

I am attempting to create a button that can replace the content of a list item. Although I have looked at other solutions, I keep encountering this error message: Uncaught TypeError: Object li#element2 has no method 'replaceWith' I have experime ...

javascriptjqueryhtmldom

The conflict name has an impact on both the folder and the PHP file

Within my web directory, there exists a folder titled area-nursing that houses various PHP files along with a specific file named area_nursing.php. However, upon attempting to rewrite area_nursing.php as area-nursing using the .htaccess file, I encounter ...

phphtmlnaming-conventions

Console output shows that the function results in undefined

When I pass a string parameter to a function, I expect the console to display "reff", but it is showing "undefined" instead. Here is the code snippet: var _ref; function foo(_ref='reff') { var bar = _ref.bar; return console.log(bar); } foo ...

javascripthtmlfunctionconsole.log

Increase the display capacity of the Bootstrap 4 Multi Carousel to showcase 4 images instead of 3

I'm having trouble getting 4 images to show instead of just 3. Referencing this Code: Bootstrap 4 Multiple Item Carousel Javascript Code $('#recipeCarousel').carousel({ interval: 10000 }) $('.carousel .carousel-item').each(fu ...

carouselbootstrap-4

How can I successfully use the Confluence REST API to publish a dynamically generated HTML table (created with PHP) without encountering the problematic HTTP

I am striving to build a page within a Confluence wiki that contains a table created using the provided REST API, which can be conveniently edited by wiki users using the WYSIWYG editor once the page is established. To achieve this, I have organized vario ...

phphtmlrestconfluenceconfluence-rest-api

Having trouble getting AngularJS ngCloak to function properly?

My post category page is supposed to display a message if there are no posts. However, the HTML appears briefly when the page loads and then hides. I thought using ngCloak would solve this issue, but it doesn't seem to be working for me. Here's t ...

javascripthtmlcssangularjs

Is there a way to customize the font size of Material UI Autocomplete?

I'm currently trying to customize the Material UI Autocomplete component with my own CSS. Specifically, I aim to adjust the font size of the input field. Below is my current implementation: <Autocomplete style={{ width: 200, height: 60, ...

cssreactjsmaterial-ui

Struggling to delete a table row using jquery

Currently, I am encountering an issue with removing a specific "tr" element within a table using jQuery. Here's the situation: I have a table where rows are clickable. Upon clicking on a row, I can update the data associated with that particular obj ...

javascriptjqueryhtmldatatable

Issues experienced with jQuery UI while attempting to implement nested drag and drop functionality

I recently created a nested drag-and-drop feature using jQuery UI, but I'm facing an issue where I can't drop items outside the .drop-container div. Here is the link to the jsfiddle for reference: FIDDLE When I try to drag an item and drop it i ...

javascriptjqueryhtmlcssjquery-ui

Load Bootstrap and Popper using Require.js and CDN

My goal is to utilize require.js to load bootstrap and jquery from a CDN. Although similar questions have been asked previously (such as Steve Eynon's response in Issue Loading PopperJS and Bootstrap via RequireJS, Even After Using Recommended Popper ...

javascriptbootstrap-4requirejs

Header with Sticky Behavior and Smooth Slide Down Animation

I am trying to achieve a scroll effect on my page where the header will move up when scrolling up, but at position 150 it should smoothly slide down and stay fixed at the top. I have tried various methods but haven't been able to get it right. Can som ...

jquerycsssticky

Webpage featuring tabs aligned horizontally

Can anyone guide me on setting up horizontal tabs similar to the design in this image: https://i.sstatic.net/ewXO4.png? Below is the code snippet: <label class="formlabel">Title 1:</label> <div id="radio_form"> <label><inpu ...

javascriptjqueryhtmlcss

Creating a form that displays only three questions simultaneously

My survey form consists of 13 questions, all displayed on one page. However, I would like to only show 3 questions at a time and then have the next set of 3 questions appear on the following page. I am not sure how to accomplish this. Any assistance would ...

javascriptjqueryhtmlcss

What could be causing jQuery.css() to not function properly?

I've been encountering some challenges with a piece of code and haven't been able to make it function as intended. I'm relatively new to JavaScript/jQuery, so bear with me as I navigate through this learning process. As part of the Free Cod ...

javascriptjquerycss

Using CSS pseudo elements (`:before` and `:after`) to display SVG icons that can be easily re-used and self-hosted

Exploring Self-Hosting Static Assets After coming across an article about the risks of using CDN's or external infrastructure for hosting static assets, I started considering self-hosting fonts and icons myself. I know you can self-host fonts by dow ...

htmlcsssvgpseudo-elementself-hosting