This step-by-step guide teaches you how to create a border-only breadcrumb shape using pure HTML and CSS. Discover how to use CSS properties like clip-path, calc(), and custom variables for an impressive breadcrumb design.
Step 1: Basic HTML Structure
The first step is to set up the basic HTML structure for the breadcrumb. You will create a container to hold all the breadcrumb items and use <div> elements for each breadcrumb.
<!-- Container for breadcrumb items -->
<div class="container">
<div class="breadcrumb">Item 1</div>
<div class="breadcrumb">Item 2</div>
<div class="breadcrumb">Item 3</div>
</div>
You can use this structure as the foundation for your breadcrumb items. Each item will be styled with a border effect.
Step 2: Adding More Styles with Custom CSS Variables
Next, we define CSS variables to control the shape of the breadcrumb and the thickness of the borders.
.container {
--b: 5px; /* border thickness */
--a: 40deg; /* angle to control the shape */
--c: #64908A; /* breadcrumb color */
display: flex; /* arrange breadcrumb items horizontally */
color: var(--c); /* use the color variable */
}
Here, we have set up three variables:
--b: Controls the border thickness.--a: Defines the angle for shaping the border.--c: Specifies the color of the breadcrumb.
Step 3: Styling the Breadcrumb Items
Now, we will style the individual breadcrumb items. These will use a combination of position, line-height, and padding to maintain the correct shape.
.breadcrumb {
position: relative;
line-height: 1.65; /* control the height */
padding-inline: calc(.5lh*tan(var(--a)) + var(--b)/cos(var(--a)));
margin-inline-start: calc(-.5lh*tan(var(--a)) - var(--b)/cos(var(--a)));
text-indent: .1em;
}
These styles make the breadcrumb items flexible, and the padding is dynamically calculated based on the angle and border thickness.
Step 4: Using Clip-path for Border Shape
To create the border-only effect, we use clip-path on the before pseudo-element of each breadcrumb. This allows us to clip the shape of the borders.
.breadcrumb:before {
content: "";
position: absolute;
inset: 0;
background: var(--c); /* background color */
clip-path: polygon(0 0, calc(100% - .5lh*tan(var(--a))) 0, 100% 50%, calc(100% - .5lh*tan(var(--a))) 100%, 0 100%, calc(.5lh*tan(var(--a))) 50%, 0 0, calc(var(--b)*(tan(var(--a)) + 1/cos(var(--a)))) var(--b), calc(.5lh*tan(var(--a)) + var(--b)/cos(var(--a))) 50%, calc(var(--b)*(tan(var(--a)) + 1/cos(var(--a)))) calc(100% - var(--b)), calc(100% - var(--b)) calc(100% - var(--b)), calc(100% - var(--b)) var(--b), calc(var(--b)*(tan(var(--a)) + cos(var(--a)))) var(--b));
}
This CSS snippet uses the clip-path property to define a complex polygon shape that wraps around the breadcrumb items, creating the border effect.
Step 5: Adjusting the First and Last Breadcrumb Items
To make the first and last breadcrumb items look better, we apply some specific styles to them. For example, the first breadcrumb has no left indent, and the last breadcrumb has no right indent.
.breadcrumb:first-child {
text-indent: 0;
padding-inline-start: calc(var(--b) + .2em);
}
.last .breadcrumb:last-child {
margin-inline-end: 0;
padding-inline-end: calc(var(--b) + .2em);
}
These additional styles ensure the first and last breadcrumbs align neatly with the rest of the navigation.
Step 6: Body Styles for Layout
Finally, apply basic body styling to center the breadcrumbs and set the overall appearance of the page.
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
place-items: center;
gap: 20px;
font-family: system-ui,sans-serif;
font-size: 40px;
font-weight: bold;
background: repeating-linear-gradient(-45deg, #fff 0 20px, #f8f8f8 0 40px);
}
This centers the content and sets a background pattern to make the breadcrumbs stand out.
Complete Code:
Here’s the complete code combining HTML and CSS:
<!-- CSS -->
<style>
.container {
--b: 5px;
--a: 40deg;
--c: #64908A;
display: flex;
color: var(--c);
}
.breadcrumb {
position: relative;
line-height: 1.65;
padding-inline: calc(.5lh*tan(var(--a)) + var(--b)/cos(var(--a)));
margin-inline-start: calc(-.5lh*tan(var(--a)) - var(--b)/cos(var(--a)));
text-indent: .1em;
}
.breadcrumb:before {
content: "";
position: absolute;
inset: 0;
background: var(--c);
clip-path: polygon(0 0, calc(100% - .5lh*tan(var(--a))) 0, 100% 50%, calc(100% - .5lh*tan(var(--a))) 100%, 0 100%, calc(.5lh*tan(var(--a))) 50%, 0 0, calc(var(--b)*(tan(var(--a)) + 1/cos(var(--a)))) var(--b), calc(.5lh*tan(var(--a)) + var(--b)/cos(var(--a))) 50%, calc(var(--b)*(tan(var(--a)) + 1/cos(var(--a)))) calc(100% - var(--b)), calc(100% - var(--b)) calc(100% - var(--b)), calc(100% - var(--b)) var(--b), calc(var(--b)*(tan(var(--a)) + cos(var(--a)))) var(--b));
}
.breadcrumb:first-child {
text-indent: 0;
padding-inline-start: calc(var(--b) + .2em);
}
.last .breadcrumb:last-child {
margin-inline-end: 0;
padding-inline-end: calc(var(--b) + .2em);
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
place-items: center;
gap: 20px;
font-family: system-ui,sans-serif;
font-size: 40px;
font-weight: bold;
background: repeating-linear-gradient(-45deg, #fff 0 20px, #f8f8f8 0 40px);
}
</style>
<!-- HTML -->
<div class="container">
<div class="breadcrumb">Item 1</div>
<div class="breadcrumb">Item 2</div>
<div class="breadcrumb">Item 3</div>
</div>
<div class="container" style="gap: .75em;--b:8px;--a:30deg;--c: #E97F02;">
<div class="breadcrumb">A1</div>
<div class="breadcrumb">B2</div>
<div class="breadcrumb">C3</div>
<div class="breadcrumb">D4</div>
<div class="breadcrumb">E5</div>
</div>
<div class="container last" style="gap: .75em;--b:3px;--a:50deg;--c: #C02942;">
<div class="breadcrumb">One</div>
<div class="breadcrumb">Two</div>
<div class="breadcrumb">Three</div>
</div>
CodePen Demo:
Conclusion:
By following this tutorial, you’ve learned how to create a stylish border-only breadcrumb navigation system using HTML and CSS. This unique design offers an attractive alternative to traditional breadcrumb styles and can be customized further to suit your website’s needs. You can experiment with different angles, border thicknesses, and colors to create a truly distinctive navigation experience.
