I modified the code Breadcrumbs arrow for working in right to left direction but text not working fine this code in jsfiddle look how text show : jsfiddle.net/tr7th3d2
<style>
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 55px;
background: brown; /* fallback color */
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-right: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
right: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-right: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-right: 1px;
right: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
padding-right: 10px;
}
.breadcrumb li:nth-child(2) a { background: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(2) a:after { border-right-color: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(3) a { background: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(3) a:after { border-right-color: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(4) a { background: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(4) a:after { border-right-color: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(5) a { background: hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a:after { border-right-color: hsla(34,85%,75%,1); }
.breadcrumb li a:hover { background: hsla(34,85%,25%,1); }
.breadcrumb li a:hover:after { border-right-color: hsla(34,85%,25%,1) !important; }
</style>
<div id="page-wrap">
<ul class="breadcrumb">
<li>Home</li>
<li>Vehicles</li>
<li>Vans</li>
<li>Camper Vans</li>
<li>1989 VW Westfalia Vanagon</li>
</ul>
</div>
and this original code :
https://css-tricks.com/triangle-breadcrumbs/
you must change a tag padding
.breadcrumb li a {
padding: 10px 55px 10px 0px;
}
Related
I have the follow ul that contains some li and are displayed/styled as arrows, and everything is working fine.
<div class="phases">
<ul class="breadcrumb">
<li>Pre-project</li>
<li>Analysis</li>
<li>Design</li>
<li>Development</li>
<li>Implementation</li>
<li>Operation</li>
</ul>
</div>
My problem is that I cant seem to wrap the last 5 li in another "arrow".
<div class="phases">
<ul class="breadcrumb">
<li>Pre-project</li>
<li class="breadcrumb_wrapper">
<ul class="">
<li>Analysis</li>
<li>Design</li>
<li>Development</li>
<li>Implementation</li>
<li>Operation</li>
</ul>
</li>
</ul>
</div>
This is the currently working example:
.phases {
width: 960px;
}
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Sans-Serif;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 20px 10px 20px 60px;
background: blue;
/* fallback color */
background: #004c89;
position: relative;
display: block;
float: left;
}
.breadcrumb li.active a {
background: #0078d7;
}
.breadcrumb li.active a::after {
border-left: 30px solid #0078d7;
}
.breadcrumb li a::after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid #004c89;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a::before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 5px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
padding-left: 10px;
}
.breadcrumb li a {
background: #004c89;
}
.breadcrumb li a:after {
border-left-color: #004c89;
}
/*
.breadcrumb li:nth-child(2) a { background: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(3) a { background: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(4) a { background: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(5) a { background: hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
*/
.breadcrumb li a:hover {
background: #0078d7;
}
.breadcrumb li a:hover:after {
border-left-color: #0078d7 !important;
}
<div class="phases">
<ul class="breadcrumb">
<li>Pre-project</li>
<li>Analysis</li>
<li>Design</li>
<li>Development</li>
<li>Implementation</li>
<li>Operation</li>
</ul>
</div>
This is where I'm at currently.
.phases {
/*width: 960px;*/
}
.breadcrumb_wrapper {
color: white;
text-decoration: none;
padding: 20px 10px 20px 60px;
background: blue;
/* fallback color */
background: green;
position: relative;
display: block;
float: left;
}
.breadcrumb_wrapper ul {
list-style: none;
}
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Sans-Serif;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 20px 10px 20px 60px;
background: blue;
/* fallback color */
background: #004c89;
position: relative;
display: block;
float: left;
}
.breadcrumb li.active a {
background: #0078d7;
}
.breadcrumb li.active a::after {
border-left: 30px solid #0078d7;
}
.breadcrumb li a::after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid #004c89;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a::before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 5px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
padding-left: 10px;
}
.breadcrumb li a {
background: #004c89;
}
.breadcrumb li a:after {
border-left-color: #004c89;
}
/*
.breadcrumb li:nth-child(2) a { background: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(3) a { background: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(4) a { background: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(5) a { background: hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
*/
.breadcrumb li a:hover {
background: #0078d7;
}
.breadcrumb li a:hover:after {
border-left-color: #0078d7 !important;
}
<div class="phases">
<ul class="breadcrumb">
<li>Pre-project</li>
<li class="breadcrumb_wrapper">
<ul class="">
<li>Analysis</li>
<li>Design</li>
<li>Development</li>
<li>Implementation</li>
<li>Operation</li>
</ul>
</li>
</ul>
</div>
I know it might be a simple thing, but i really struckle with it.
What i want.
I would consider another way to create the shape using gradient and it will be easier to nest element like you want and adjust the distance and control the arrow using margin and also easily change the color with the CSS variable I used:
.phases {
width: 1500px;
}
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Sans-Serif;
margin: 0;
padding: 10px 0;
}
.breadcrumb li {
float: left;
margin-right: -15px;
}
.breadcrumb li:first-child {
margin-left: -20px;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 20px 40px;
--c: #004c89;
background:
linear-gradient(var(--c), var(--c)) 20px 0 /calc(100% - 40px) 100% no-repeat,
linear-gradient(to bottom right, var(--c) 50%, transparent 50.5%) 100% 100%/20px 51% no-repeat,
linear-gradient(to top right, var(--c) 50%, transparent 50.5%) 100% 0/20px 51% no-repeat,
linear-gradient(to top left, var(--c) 50%, transparent 50.5%) 0 100%/20px 51% no-repeat,
linear-gradient(to bottom left, var(--c) 50%, transparent 50.5%) 0 0/20px 51% no-repeat;
position: relative;
float: left;
}
.breadcrumb li a:hover {
--c: #0078d7;
}
.breadcrumb_wrapper {
margin-left: 30px;
position: relative;
}
.breadcrumb_wrapper:before {
content: "";
position: absolute;
top: -8px;
bottom: -8px;
left: -25px;
right: 0;
--c:green;
background:
linear-gradient(var(--c), var(--c)) 20px 0 /calc(100% - 40px) 100% no-repeat,
linear-gradient(to bottom right, var(--c) 50%, transparent 50.5%) 100% 100%/20px 51% no-repeat,
linear-gradient(to top right, var(--c) 50%, transparent 50.5%) 100% 0/20px 51% no-repeat,
linear-gradient(to top left, var(--c) 50%, transparent 50.5%) 0 100%/20px 51% no-repeat,
linear-gradient(to bottom left, var(--c) 50%, transparent 50.5%) 0 0/20px 51% no-repeat;
}
.breadcrumb_wrapper .breadcrumb {
padding: 0;
}
.breadcrumb_wrapper ul li:last-child {
margin-right: 20px;
}
<div class="phases">
<ul class="breadcrumb">
<li>Pre-project</li>
<li>Analysis</li>
<li>Design</li>
<li class="breadcrumb_wrapper">
<ul class="breadcrumb">
<li>Analysis</li>
<li>Design</li>
<li>Development</li>
<li>Implementation</li>
<li>Operation</li>
</ul>
</li>
</ul>
</div>
Your problem starts when you styling your li's in a generic way and no by name class or id. So your breadcrumb_wrapper li is affected when this container shoud not have same styles as the others. Try use a class for every li You want to behave as arrow and do not use it on the container.
Starting point in the snippet
.phases {
/*width: 960px;*/
}
.breadcrumb_wrapper {
}
.breadcrumb_wrapper ul {
list-style: none;
}
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Sans-Serif;
}
.breadcrumb .arrow {
float: left;
}
.breadcrumb .arrow a {
color: white;
text-decoration: none;
padding: 20px 10px 20px 60px;
background: blue;
/* fallback color */
background: #004c89;
position: relative;
display: block;
float: left;
}
.breadcrumb .arrow.active a {
background: #0078d7;
}
.breadcrumb .arrow.active a::after {
border-left: 30px solid #0078d7;
}
.breadcrumb .arrow a::after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid #004c89;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb .arrow a::before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 5px;
left: 100%;
z-index: 1;
}
.breadcrumb .arrow:first-child a {
padding-left: 10px;
}
.breadcrumb .arrow a {
background: #004c89;
}
.breadcrumb .arrow a:after {
border-left-color: #004c89;
}
/*
.breadcrumb li:nth-child(2) a { background: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(3) a { background: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(4) a { background: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(5) a { background: hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
*/
.breadcrumb .arrow a:hover {
background: #0078d7;
}
.breadcrumb .arrow a:hover:after {
border-left-color: #0078d7 !important;
}
<div class="phases">
<ul class="breadcrumb">
<li class="arrow" style="margin-right:50px;">Pre-project</li>
<li class="breadcrumb_wrapper">
<ul class="">
<li class="arrow">Analysis</li>
<li class="arrow">Design</li>
<li class="arrow">Development</li>
<li class="arrow">Implementation</li>
<li class="arrow">Operation</li>
</ul>
</li>
</ul>
</div>
Update your css and html like this
.phases {
/*width: 960px;*/
}
.breadcrumb_wrapper {
color: white;
text-decoration: none;
padding: 20px 10px 20px 20px;
background: blue;
/* fallback color */
background: green;
position: relative;
display: block;
float: left;
}
.breadcrumb_wrapper ul {
list-style: none;
}
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Sans-Serif;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 20px 10px 20px 60px;
background: blue;
/* fallback color */
background: #004c89;
position: relative;
display: block;
float: left;
}
.breadcrumb li.active a {
background: #0078d7;
}
.breadcrumb li.active a::after {
border-left: 30px solid #0078d7;
}
.breadcrumb li a::after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid #004c89;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a::before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 5px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
padding-left: 10px;
}
.breadcrumb li a {
background: #004c89;
}
.breadcrumb li a:after {
border-left-color: #004c89;
}
/*
.breadcrumb li:nth-child(2) a { background: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(3) a { background: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(4) a { background: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(5) a { background: hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
*/
.breadcrumb li a:hover {
background: #0078d7;
}
.breadcrumb li a:hover:after {
border-left-color: #0078d7 !important;
}
.first-set-li{ float:left; margin-right:50px; overflow:hidden; padding-right:33px; margin-top:20px; }
.breadcrumb_wrapper ul{ padding:0px; float:left; overflow:hidden; padding-right:40px;}
.breadcrumb .breadcrumb_wrapper li a::before{ border-left: 30px solid green; }
HTML
<div class="phases">
<ul class="breadcrumb">
<li class="first-set-li">Pre-project</li>
<li class="breadcrumb_wrapper">
<ul class="">
<li>Analysis</li>
<li>Design</li>
<li>Development</li>
<li>Implementation</li>
<li>Operation</li>
</ul>
</li>
</ul>
</div>
Here is my plunker:
plnkr.co
.breadcrumb li a.half-transparent {
background: grey;
opacity: 0.5;
}
Applying opacity here produces a darker area between level 2 and level 3.
How to bring this darker area to the same color around it?
Refer this snippet, Hope it helps
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
margin: 40px;
padding: 0;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 55px;
background: brown; /* fallback color */
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
padding-left: 10px;
}
.breadcrumb li:nth-child(2) a { background: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(3) a { background: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(4) a { background: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(5) a { background: hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
.breadcrumb li:last-child a {
background: transparent !important;
color: black;
pointer-events: none;
cursor: default;
}
.breadcrumb li:last-child a:after { border: 0; }
.breadcrumb li a:hover { background: hsla(34,85%,25%,1); }
.breadcrumb li a:hover:after { border-left-color: hsla(34,85%,25%,1) !important; }
.steps {
margin: 40px;
padding: 0;
overflow: hidden;
}
.steps a {
color: white;
text-decoration: none;
}
.steps em {
display: block;
font-size: 1.1em;
font-weight: bold;
}
.steps li {
float: left;
margin-left: 0;
width: 150px; /* 100 / number of steps */
height: 70px; /* total height */
list-style-type: none;
padding: 5px 5px 5px 30px; /* padding around text, last should include arrow width */
border-right: 3px solid white; /* width: gap between arrows, color: background of document */
position: relative;
}
/* remove extra padding on the first object since it doesn't have an arrow to the left */
.steps li:first-child {
padding-left: 5px;
}
/* white arrow to the left to "erase" background (starting from the 2nd object) */
.steps li:nth-child(n+2)::before {
position: absolute;
top:0;
left:0;
display: block;
border-left: 25px solid white; /* width: arrow width, color: background of document */
border-top: 40px solid transparent; /* width: half height */
border-bottom: 40px solid transparent; /* width: half height */
width: 0;
height: 0;
content: " ";
}
/* colored arrow to the right */
.steps li::after {
z-index: 1; /* need to bring this above the next item */
position: absolute;
top: 0;
right: -25px; /* arrow width (negated) */
display: block;
border-left: 25px solid #7c8437; /* width: arrow width */
border-top: 40px solid transparent; /* width: half height */
border-bottom: 40px solid transparent; /* width: half height */
width:0;
height:0;
content: " ";
}
/* Setup colors (both the background and the arrow) */
/* Completed */
.steps li { background-color: #7C8437; }
.steps li::after { border-left-color: #7c8437; }
/* Current */
.steps li.current { background-color: #C36615; }
.steps li.current::after { border-left-color: #C36615; }
/* Following */
.steps li.current ~ li { background-color: #EBEBEB; }
.steps li.current ~ li::after { border-left-color: #EBEBEB; }
/* Hover for completed and current */
.steps li:hover {background-color: #696}
.steps li:hover::after {border-left-color: #696}
.arrows { white-space: nowrap; }
.arrows li {
display: inline-block;
line-height: 26px;
margin: 0 9px 0 -10px;
padding: 0 20px;
position: relative;
}
.arrows li::before,
.arrows li::after {
border-right: 1px solid #666666;
content: '';
display: block;
height: 50%;
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: -1;
transform: skewX(45deg);
}
.arrows li::after {
bottom: 0;
top: auto;
transform: skewX(-45deg);
}
.arrows li:last-of-type::before,
.arrows li:last-of-type::after {
display: none;
}
.arrows li a {
font: bold 24px Sans-Serif;
letter-spacing: -1px;
text-decoration: none;
}
.arrows li:nth-of-type(1) a { color: hsl(0, 0%, 70%); }
.arrows li:nth-of-type(2) a { color: hsl(0, 0%, 65%); }
.arrows li:nth-of-type(3) a { color: hsl(0, 0%, 50%); }
.arrows li:nth-of-type(4) a { color: hsl(0, 0%, 45%); }
<ul class="breadcrumb">
<li>Home</li>
<li>Vehicles</li>
<li>Vans</li>
<li>Camper Vans</li>
<li>1989 VW Westfalia Vanagon</li>
</ul>
<ul class="steps steps-5">
<li><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
<li><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
<li class="current"><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
<li><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
<li><em>Step 5: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
</ul>
<ol class="arrows">
<li>Home</li>
<li>About</li>
<li>Clients</li>
<li>Contact Us</li>
</ol>
One solution would be that you don't put opacity on the level2 and level3 elements.
.breadcrumb li a.half-transparent {
background: grey;
}
This question already has answers here:
How to make this arrow in CSS only?
(5 answers)
Closed 6 years ago.
How can i achieve the effect in the below image using css
parent div with divs with triangle egde like in the picture below. if i can achieve this with JS am also open to any good idea
* {
margin: 0;
}
a {
color: #333;
text-decoration: none;
}
nav {
background: #eee;
overflow: hidden;
}
nav li {
display: inline-block;
vertical-align: top;
position: relative;
}
nav li:after {
content: " ";
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 40px;
transform: rotate(45deg);
background: #999;
}
nav a {
display: block;
padding: 14px 20px;
position: relative;
z-index: 1;
}
nav li a:before {
content: " ";
position: absolute;
right: 3px;
top: 0;
bottom: 0;
width: 40px;
transform: rotate(45deg);
background: #eee;
z-index: -1;
}
<nav>
<ul>
<li>Jewelry and watches
</li>
<li>watches
</li>
<li>Jewelry
</li>
<li>Wrist watches
</li>
</ul>
</nav>
Or you can even simplify it by using one psudo element and using the border property
* {
margin: 0;
}
a {
color: #333;
text-decoration: none;
}
nav {
background: #eee;
overflow: hidden;
box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.25);
margin: 15px;
}
nav li {
display: inline-block;
vertical-align: top;
position: relative;
}
nav li:after {
content: " ";
position: absolute;
right: 0px;
top: -1px;
bottom: 0;
width: 30px;
transform: rotate(45deg);
background: transparent;
height: 30px;
border-right: 1px solid #999;
border-top: 1px solid #999;
}
nav a {
display: block;
padding: 5px 20px;
position: relative;
z-index: 1;
}
<nav>
<ul>
<li>Jewelry and watches
</li>
<li>watches
</li>
<li>Jewelry
</li>
<li>Wrist watches
</li>
</ul>
</nav>
Try this one
HTML
<ul class="breadcrumb">
<li>Home</li>
<li>Vehicles</li>
<li>Vans</li>
<li>Camper Vans</li>
<li>1989 VW Westfalia Vanagon</li>
</ul>
CSS
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 65px;
background: brown; /* fallback color */
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
padding-left: 10px;
}
.breadcrumb li:nth-child(2) a { background: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(3) a { background: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(4) a { background: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(5) a { background: hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
.breadcrumb li:last-child a {
background: transparent !important;
color: black;
pointer-events: none;
cursor: default;
}
.breadcrumb li a:hover { background: hsla(34,85%,25%,1); }
.breadcrumb li a:hover:after { border-left-color: hsla(34,85%,25%,1) !important; }
I am working on this step by step pattern and I am having some issues aligning the text to be in the middle as you can see here: https://jsfiddle.net/54vtc0n0/
I tried the align-vertical:middle but that did not work for me, maybe I did it wrong? Do any of you have any ideas on how to align this?
Also, I want to link the blue steps to a url so when you click on the validated step it takes you to a page. However it looks like I can't have an href on an li pointing to an outside page. I really need this to link to a url. Does anyone knows a work around.
Thanks in advance
HTML:
<!doctype html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="crumbs">
<ul>
<li class="blue">Start <i class="fa fa-check-circle-o fa-lg" style = "align: right" ></i></li>
<li >About you </li>
<li class= "grey">Plans</li>
<li class= "grey">Details</li>
<li class="grey">Enroll</li>
</ul>
</div>
</div>
CSS:
#crumbs ul {
list-style: none;
display: inline-table;
}
#crumbs ul li {
display: inline;
}
#crumbs ul li a {
display: block;
float: left;
background: #3498db;
text-align: rigth;
padding: 25px 15px 0 40px;
position: relative;
margin: 0 0px 5px 0;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
padding-right: 5px;
padding-bottom: 5px;
}
#crumbs ul li a:after {
content: "";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #009bda;
position: absolute; right: -25px; top: 0;
z-index: 1;
}
#crumbs ul li a:before {
content: "";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #fff;
position: absolute; left: 0; top: 0;
}
#crumbs ul li:first-child a {
border-top: 0px; border-bottom: 0px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 8px;
padding-bottom: 5px;
border-top-right-radius: 0px; border-bottom: 0px;
}
#crumbs ul li:last-child a:after {
display: none;
}
#crumbs ul li a:hover {
background: #ed5338;
}
#crumbs ul li a:hover:after {
border-left-color: #ed5338;
}
<!-----------------------The non active state-------------------------->
#crumbs ul li.notactive {
display: inline;
}
#crumbs ul li.notactive a {
display: block;
float: left;
background: #d1d1ce;
text-align: rigth;
padding: 25px 15px 0 60px;
position: relative;
margin: 0 0px 5px 0;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
padding-right: 5px;
padding-bottom: 5px;
}
#crumbs ul li.notactive a:after {
content: "";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #d1d1ce;
position: absolute; right: -25px; top: 0;
z-index: 1;
}
#crumbs ul li.notactive a:before {
content: "";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid transparent;
position: absolute; left: 0; top: 0;
}
#crumbs ul li.notactive:first-child a {
border-top: 0px; border-bottom: 0px;
}
#crumbs ul li.notactive:first-child a:before {
display: none;
}
#crumbs ul li.notactive:last-child a {
padding-right: 10px;
padding-bottom: 5px;
border-top-right-radius: 0px; border-bottom: 0px;
}
#crumbs ul li.notactive:last-child a:after {
display: none;
}
#crumbs ul li a:hover {
background: #ed5338;
}
#crumbs ul li a:hover:after {
border-left-color: #ed5338;
}
<!-------------------Blue box------------------------->
#crumbs ul li.blue {
display: inline;
}
#crumbs ul li.blue a {
display: block;
float: left;
background: #009bda;
text-align: rigth;
padding: 25px 15px 0 60px;
position: relative;
margin: 0 0px 5px 0;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
padding-right: 5px;
padding-bottom: 5px;
}
<!-------------------Grey box------------------------->
#crumbs ul li.grey {
display: inline;
}
#crumbs ul li.grey a {
display: block;
float: left;
background: #d1d1ce;
text-align: rigth;
padding: 25px 15px 0 60px;
position: relative;
margin: 0 0px 5px 0;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
padding-right: 5px;
padding-bottom: 5px;
}
#crumbs ul li.grey a:after {
content: "";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #d1d1ce;
position: absolute; right: -25px; top: 0;
z-index: 1;
}
#crumbs ul li.grey a:before {
content: "";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid transparent;
position: absolute; left: 0; top: 0;
}
So using this simple tutorial which I googled:
https://css-tricks.com/triangle-breadcrumbs/
I was able to recreate your "breadcrumbs" by changing the colours..
https://jsfiddle.net/54vtc0n0/2/
(Credit goes to author of tutorial: Chris Coyier)
You can use java script to change the active link/tab colour by changing the css for that tab, for example:
HTML
<ul class="breadcrumb">
<li>Start</li>
<li>About you</li>
<li>Plans</li>
<li>Details</li>
<li>Enroll</li>
</ul>
CSS:
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 65px;
background: #009BDA;
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid #009BDA;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
padding-left: 10px;
}
.breadcrumb li:nth-child(2) a { background: #D1D1CE; }
.breadcrumb li:nth-child(2) a:after { border-left-color: #D1D1CE; }
.breadcrumb li:nth-child(3) a { background: #D1D1CE; }
.breadcrumb li:nth-child(3) a:after { border-left-color: #D1D1CE; }
.breadcrumb li:nth-child(4) a { background: #D1D1CE; }
.breadcrumb li:nth-child(4) a:after { border-left-color: #D1D1CE; }
.breadcrumb li:nth-child(5) a { background: #D1D1CE; }
.breadcrumb li:nth-child(5) a:after { border-left-color: #D1D1CE; }
.breadcrumb li a:hover { background: #A5A5A5; }
.breadcrumb li a:hover:after { border-left-color: #A5A5A5 !important; }
Also a little advice when formatting your css, each css rule should not be tabbed in.. it is not HTML. Unless you're using something like media queries or SASS when its needed then go ahead.
Your padding is making the text does not centered vertically
So you can adjust it like this:
*{
box-sizing: border-box;
}
#crumbs ul {
display: inline-table;
}
#crumbs ul li {
display:table-cell;
vertical-align: middle;
}
#crumbs ul li a {
display:table-cell;
vertical-align: middle;
float: left;
background: #009bda;
text-align: rigth;
padding: 15px 5px 15px 60px; /*changed*/
position: relative;
/* margin: 0px 0px 5px 0; */
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
height: 50px; /*added*/
}
#crumbs ul li a:after {
content:"";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #009bda;
position: absolute;
right: -25px;
top: 0;
z-index: 1;
}
#crumbs ul li a:before {
content:'';
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #fff;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li:first-child a {
border-top: 0px;
border-bottom: 0px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 10px;
padding-bottom: 5px;
border-top-right-radius: 0px;
border-bottom: 0px;
}
#crumbs ul li:last-child a:after {
display: none;
}
#crumbs ul li a:hover {
background: #ed5338;
}
#crumbs ul li a:hover:after {
border-left-color: #ed5338;
}
<!-----------------------The non active state--------------------------> #crumbs ul li.notactive {
display: inline;
}
#crumbs ul li.notactive a {
display: block;
float: left;
background: #d1d1ce;
text-align: rigth;
padding: 25px 15px 0 60px;
position: relative;
margin: 0 0px 5px 0;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
padding-right: 5px;
padding-bottom: 5px;
}
#crumbs ul li.notactive a:after {
content:"";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #d1d1ce;
position: absolute;
right: -25px;
top: 0;
z-index: 1;
}
#crumbs ul li.notactive a:before {
content:"";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid transparent;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li.notactive:first-child a {
border-top: 0px;
border-bottom: 0px;
}
#crumbs ul li.notactive:first-child a:before {
display: none;
}
#crumbs ul li.notactive:last-child a {
padding-right: 10px;
padding-bottom: 5px;
border-top-right-radius: 0px;
border-bottom: 0px;
}
#crumbs ul li.notactive:last-child a:after {
display: none;
}
#crumbs ul li a:hover {
background: #ed5338;
}
#crumbs ul li a:hover:after {
border-left-color: #ed5338;
}
<!-------------------Blue box-------------------------> #crumbs ul li.blue {
display: inline;
}
#crumbs ul li.blue a {
display: block;
float: left;
background: #009bda;
text-align: rigth;
padding: 25px 15px 0 60px;
position: relative;
margin: 0 0px 5px 0;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
padding-right: 5px;
padding-bottom: 5px;
}
<!-------------------Grey box-------------------------> #crumbs ul li.grey {
display: inline;
}
#crumbs ul li.grey a {
display: block;
float: left;
background: #d1d1ce;
text-align: rigth;
padding: 15px 15px 15px 60px; /*changed*/
position: relative;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
padding-right: 5px;
padding-bottom: 5px;
height: 50px;
}
#crumbs ul li.grey a:after {
content:"";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #d1d1ce;
position: absolute;
right: -25px;
top: 0;
z-index: 1;
}
#crumbs ul li.grey a:before {
content:"";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid transparent;
position: absolute;
left: 0;
top: 0;
}
<div id="crumbs">
<ul>
<li>Start
</li>
<li class="grey">About you
</li>
<li class="grey">Plans
</li>
<li class="grey">Details
</li>
<li class="grey">Enroll
</li>
</ul>
</div>
Or you can use flexbox like this:
* {
box-sizing: border-box;
}
#crumbs ul {
display: inline-table;
}
#crumbs ul li {
display:table-cell;
vertical-align: middle;
}
#crumbs ul li a {
display: flex;
align-items: center;
float: left;
background: #009bda;
text-align: rigth;
padding-left: 60px; /*changed*/
position: relative;
/* margin: 0px 0px 5px 0; */
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
padding-right: 5px;
/* padding-bottom: 5px; */
height: 50px;
}
#crumbs ul li a:after {
content:"";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #009bda;
position: absolute;
right: -25px;
top: 0;
z-index: 1;
}
#crumbs ul li a:before {
content:'';
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #fff;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li:first-child a {
border-top: 0px;
border-bottom: 0px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 10px;
/*padding-bottom: 5px;*/
border-top-right-radius: 0px;
border-bottom: 0px;
}
#crumbs ul li:last-child a:after {
display: none;
}
#crumbs ul li a:hover {
background: #ed5338;
}
#crumbs ul li a:hover:after {
border-left-color: #ed5338;
}
<!-----------------------The non active state--------------------------> #crumbs ul li.notactive {
display: inline;
}
#crumbs ul li.notactive a {
display: block;
float: left;
background: #d1d1ce;
text-align: rigth;
padding: 25px 15px 0 60px;
position: relative;
margin: 0 0px 5px 0;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
padding-right: 5px;
padding-bottom: 5px;
}
#crumbs ul li.notactive a:after {
content:"";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #d1d1ce;
position: absolute;
right: -25px;
top: 0;
z-index: 1;
}
#crumbs ul li.notactive a:before {
content:"";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid transparent;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li.notactive:first-child a {
border-top: 0px;
border-bottom: 0px;
}
#crumbs ul li.notactive:first-child a:before {
display: none;
}
#crumbs ul li.notactive:last-child a {
padding-right: 10px;
padding-bottom: 5px;
border-top-right-radius: 0px;
border-bottom: 0px;
}
#crumbs ul li.notactive:last-child a:after {
display: none;
}
#crumbs ul li a:hover {
background: #ed5338;
}
#crumbs ul li a:hover:after {
border-left-color: #ed5338;
}
<!-------------------Blue box-------------------------> #crumbs ul li.blue {
display: inline;
}
#crumbs ul li.blue a {
display: block;
float: left;
background: #009bda;
text-align: rigth;
padding: 25px 15px 0 60px;
position: relative;
margin: 0 0px 5px 0;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
padding-right: 5px;
padding-bottom: 5px;
}
<!-------------------Grey box-------------------------> #crumbs ul li.grey {
display: inline;
}
#crumbs ul li.grey a {
/* display: block; */
float: left;
background: #d1d1ce;
text-align: rigth;
padding-left: 60px;
position: relative;
/* margin: 0 0px 5px 0; */
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
padding-right: 5px;
/* padding-bottom: 5px; */
}
#crumbs ul li.grey a:after {
content:"";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #d1d1ce;
position: absolute;
right: -25px;
top: 0;
z-index: 1;
}
#crumbs ul li.grey a:before {
content:"";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid transparent;
position: absolute;
left: 0;
top: 0;
}
<div id="crumbs">
<ul>
<li>Start
</li>
<li class="grey">About you
</li>
<li class="grey">Plans
</li>
<li class="grey">Details
</li>
<li class="grey">Enroll
</li>
</ul>
</div>
In both case I commented the changed code.
I am using a div for my site's breadcrumbs. It remains a constant size on the actual size of browser window and on zoom in. But on zoom out the div is shrinking.
This is the code am using. Do I require an edit in it somewhere?
<style>
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Lucida Sans Unicode;
text-align: center;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 11px 0 11px 55px;
background: #327ea4; /* fallback color */
background: #327ea4;
position: relative;
display: block;
float: left;
width: 15.12em;
/*width: 15.1185em;*/
cursor: default;
border-top-left-radius: .4em;
pointer-events: none;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid #327ea4;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
padding-left: 30px;
}
.breadcrumb li:nth-child(2) a { background: #7fc1ec; color: #327ea4; cursor: default;}
.breadcrumb li:nth-child(2) a:after { border-left-color: #7fc1ec; color: #327ea4; cursor: default;}
.breadcrumb li:nth-child(3) a { background: #7fc1ec; color: #327ea4; cursor: default;}
.breadcrumb li:nth-child(3) a:after { border-left-color: #7fc1ec; color: #327ea4; cursor: default;}
.breadcrumb li:nth-child(4) a { background: #7fc1ec; color: #327ea4; cursor: default;}
.breadcrumb li:nth-child(4) a:after { border-left-color: #7fc1ec; color: #327ea4; cursor: default; }
.breadcrumb li:last-child a {
/*background: white !important;*/
/*color: black;*/
pointer-events: none;
cursor: default;
border-top-right-radius: .4em;
}
.breadcrumb li:last-child a:after { border: 0; }
</style>
<div style="width:75em;" oncontextmenu="return false" >
<ul class="breadcrumb">
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
</ul>
</div>
Thanks in advance.
when you define the height or width of an element in EM's, like in the following snippet...
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 11px 0 11px 55px;
background: #327ea4;
background: #327ea4;
position: relative;
display: block;
float: left;
width: 15.12em; /* <-- RIGHT HERE */
cursor: default;
border-top-left-radius: .4em;
pointer-events: none;
}
... you're actually binding the the size of the element to the font-size for that element.
When you increase the browser "zoom", all that's happening is in the font size is being increased (in pixels).
Example:
font-size: 10px, therefore width: 2em == width: 20px.
Zoom (increase font-size)
font-size: 12px, therefore width: 2em == width: 24px.