I would like to make an upside down shape of a trapezoid, that I would like to use as a navigation bar.
Similar to this image:
You can try this
.nav>li>a, .nav>li>a:active, .nav>li>a:focus, .nav>li>a:hover {
display: inline-block!important;
position: relative!important;
color: #fff;
text-transform: uppercase;
margin-left: 60px;
box-shadow: 0px 4px 3px rgba(0,0,0,0.3);
padding: 0!important;
text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}
.nav li a span {
display: inline-block;
position: relative;
padding: 15px 40px;
background: #ea9c0c;
}
.nav li a:after{
content:"";
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
.nav li a:after {
content: "";
width: 0;
height: 0;
border-top: 50px solid #ea9c0c;
border-right: 47px solid transparent;
position: absolute;
top: 0;
right: -47px;
z-index: 1;
}
.nav li a:before {
content: "";
width: 0;
height: 0;
border-top: 50px solid #ea9c0c;
border-left: 47px solid transparent;
position: absolute;
top: 0;
left: -47px;
z-index: 1;
}
.nav li a span:after {
content: "";
width: 0;
height: 0;
border-top: 50px solid rgba(0,0,0,0.3);
border-right: 47px solid transparent;
position: absolute;
top: 4px;
right: -47px;
}
.nav li a span:before {
content: "";
width: 0;
height: 0;
border-top: 50px solid rgba(0,0,0,0.3);
border-left: 47px solid transparent;
position: absolute;
top: 4px;
left: -47px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav">
<li><span>Home</span></li>
</ul>
Related
I am really confused why I can't choose a span inside <a> tag by saying that
ul li a:hover span:first-child:before{
top: -10px;
left: -10px;
opacity: 1; }
This is the similar question I posted yesterday but a little bit different.
Yesterday,
what I wanted to try div wasn't children div however now span is the child of the <a> tag. I will appreciate any help.
body {
margin: 0;
padding: 0;
background: #ccc;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.center ul {
margin: 0;
padding: 0;
}
.center ul li {
list-style: none;
display: inline-block;
padding: 10px;
position: relative;
margin: 5px;
font-size: 20px;
position: relative;
}
.center ul li a {
text-decoration: none;
color: white;
}
ul li a:hover span:first-child:before {
top: -10px;
left: -10px;
opacity: 1;
}
.center ul li a span:first-child::before {
position: absolute;
content: '';
width: 8px;
height: 8px;
border-top: 5px solid black;
border-left: 5px solid black;
top: 0px;
left: 0;
opacity: 0.4;
transition: .6s;
}
.center ul li a span:first-child::after {
position: absolute;
content: '';
width: 8px;
height: 8px;
border-top: 5px solid black;
border-right: 5px solid black;
top: 0px;
right: 0;
opacity: 0.4;
transition: .6s;
}
.center ul li a span:last-child::before {
position: absolute;
content: '';
width: 8px;
height: 8px;
border-left: 5px solid black;
border-bottom: 5px solid black;
bottom: 0px;
left: 0;
opacity: 0.4;
transition: .6s;
}
.center ul li a span:last-child::after {
position: absolute;
content: '';
width: 8px;
height: 8px;
border-bottom: 5px solid black;
border-right: 5px solid black;
bottom: 0px;
right: 0;
opacity: 0.4;
transition: .6s;
}
<div class="center">
<ul>
<li>HOME <span></span><span></span></li>
<li>MENU <span></span><span></span></li>
<li>CONTACT <span></span><span></span></li>
<li>PORTFOLIO <span></span><span></span></li>
</ul>
</div>
Place your hover effect after all your pseudo element declarations.
body{
margin: 0;
padding: 0;
background: #ccc;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.center ul{
margin: 0;
padding: 0;
}
.center ul li{
list-style: none;
display: inline-block;
padding: 10px;
position: relative;
margin: 5px;
font-size: 20px;
position: relative;
}
.center ul li a{
text-decoration: none;
color: white;
}
.center ul li a span:first-child::before{
position: absolute;
content: '';
width: 8px;
height: 8px;
border-top: 5px solid black;
border-left: 5px solid black;
top: 0px;
left: 0;
opacity: 0.4;
transition: .6s;
}
.center ul li a span:first-child:after{
position: absolute;
content: '';
width: 8px;
height: 8px;
border-top: 5px solid black;
border-right: 5px solid black;
top: 0px;
right: 0;
opacity: 0.4;
transition: .6s;
}
.center ul li a span:last-child::before{
position: absolute;
content: '';
width: 8px;
height: 8px;
border-left: 5px solid black;
border-bottom: 5px solid black;
bottom: 0px;
left: 0;
opacity: 0.4;
transition: .6s;
}
.center ul li a span:last-child::after{
position: absolute;
content: '';
width: 8px;
height: 8px;
border-bottom: 5px solid black;
border-right: 5px solid black;
bottom: 0px;
right: 0;
opacity: 0.4;
transition: .6s;
}
ul li a:hover span:first-child::before{
top: -10px;
left: -10px;
opacity: 1;
}
I have tested it here: https://jsfiddle.net/9z7r3e8a/5/
Instead of :first-child you should use :first-of-type, because you already have text element in first place (and as first-child). The :first-of-type will select first span element among all children of <a>:
body {
margin: 0;
padding: 0;
background: #ccc;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.center ul {
margin: 0;
padding: 0;
}
.center ul li {
list-style: none;
display: inline-block;
padding: 10px;
position: relative;
margin: 5px;
font-size: 20px;
position: relative;
}
.center ul li a {
text-decoration: none;
color: white;
}
ul li a:hover span:first-of-type:before {
top: -10px;
left: -10px;
opacity: 1;
}
.center ul li a span:first-of-type::before {
position: absolute;
content: '';
width: 8px;
height: 8px;
border-top: 5px solid black;
border-left: 5px solid black;
top: 0px;
left: 0;
opacity: 0.4;
transition: .6s;
}
.center ul li a span:first-of-type::after {
position: absolute;
content: '';
width: 8px;
height: 8px;
border-top: 5px solid black;
border-right: 5px solid black;
top: 0px;
right: 0;
opacity: 0.4;
transition: .6s;
}
.center ul li a span:last-of-type::before {
position: absolute;
content: '';
width: 8px;
height: 8px;
border-left: 5px solid black;
border-bottom: 5px solid black;
bottom: 0px;
left: 0;
opacity: 0.4;
transition: .6s;
}
.center ul li a span:last-of-type::after {
position: absolute;
content: '';
width: 8px;
height: 8px;
border-bottom: 5px solid black;
border-right: 5px solid black;
bottom: 0px;
right: 0;
opacity: 0.4;
transition: .6s;
}
.center ul li a:hover span:first-of-type:before {
top: -10px;
left: -10px;
opacity: 1;
}
<div class="center">
<ul>
<li>HOME <span></span><span></span></li>
<li>MENU <span></span><span></span></li>
<li>CONTACT <span></span><span></span></li>
<li>PORTFOLIO <span></span><span></span></li>
</ul>
</div>
I need tab control like this
can any one please help me how to do.
I am able to create tab without background color like bellow:
#crumbs {
width: 100%;
display: grid;
}
#crumbs ul {
list-style: none;
padding: 7px 5px;
margin: 0px;
}
#crumbs ul li a {
display: block;
float: left;
height: 50px;
background: #3498db;
text-align: center;
padding: 30px 40px 0 80px;
position: relative;
margin: 0 10px 0 0;
font-size: 20px;
text-decoration: none;
color: #fff;
width: 22%;
}
#crumbs ul li a:after {
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #3498db;
position: absolute;
right: -40px;
top: 0;
z-index: 1;
}
#crumbs ul li a:before {
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #fff;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li a.inprogress {
display: block;
float: left;
height: 50px;
background: #34db3a;
text-align: center;
padding: 30px 40px 0 80px;
position: relative;
margin: 0 10px 0 0;
font-size: 20px;
text-decoration: none;
color: #fff;
width: 22%;
}
#crumbs ul li a.inprogress:after {
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #34db3a;
position: absolute;
right: -40px;
top: 0;
z-index: 1;
}
#crumbs ul li a.inprogress:before {
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #fff;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li a.cpmpleted {
display: block;
float: left;
height: 50px;
background: #b334db;
text-align: center;
padding: 30px 40px 0 80px;
position: relative;
margin: 0 10px 0 0;
font-size: 20px;
text-decoration: none;
color: #fff;
width: 22%;
}
#crumbs ul li a.cpmpleted:after {
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #b334db;
position: absolute;
right: -40px;
top: 0;
z-index: 1;
}
#crumbs ul li a.cpmpleted:before {
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #fff;
position: absolute;
left: 0;
top: 0;
}
<div id="crumbs">
<ul>
<li>One</li>
<li>Two</li>
<li> Three </li>
</ul>
</div>
I would consider skew transformation and pseudo element like this:
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
padding: 0 20px;
}
li {
padding: 10px 30px;
position: relative;
}
li:before {
content: "";
z-index: -1;
position: absolute;
top: 0;
bottom: 50%;
right: 0;
left: 0;
background: var(--c);
transform: skew(40deg);
}
li:after {
content: "";
z-index: -1;
position: absolute;
top: 50%;
bottom: 0;
right: 0;
left: 0;
background: var(--c);
transform: skew(-40deg);
}
li.active:before {
border: 2px solid orange;
border-bottom: none;
}
li.active:after {
border: 2px solid orange;
border-top: none;
}
<ul>
<li style="--c:red"> Step 1</li>
<li style="--c:green" class="active"> Step 2</li>
<li style="--c:blue"> Step 3</li>
</ul>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I want convert a psd file to html and css and I want to convert it into html and css . But I cant do that
This is how I would do it. Add some #media queries to make it responsive.
.breadcrumbs {
position: relative;
display: inline-block;
vertical-align: middle;
border: 1px solid #ccc;
overflow: hidden;
}
.breadcrumb {
padding: 9px 12px 9px 24px;
position: relative;
float: left;
background-color: #f1f1f1;
display: inline-block;
margin-bottom: 0;
text-align: center;
border: 1px solid transparent;
color: #333;
text-transform: uppercase;
font: 12px sans-serif;
text-decoration: none;
font-weight: 700;
}
.breadcrumb:first-child {
padding: 9px 12px 9px 18px !important;
}
.breadcrumbs .breadcrumb:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #ccc;
position: absolute;
top: 50%;
margin-top: -20px;
margin-left: 1px;
left: 101%;
z-index: 3;
}
.breadcrumbs .breadcrumb:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #f1f1f1;
position: absolute;
top: 50%;
margin-top: -20px;
left: 101%;
z-index: 3;
}
.breadcrumb.active,
.breadcrumb:hover {
padding: 9px 12px 9px 24px;
position: relative;
float: left;
background-color: #3f51b5;
display: inline-block;
margin-bottom: 0;
text-align: center;
border: 1px solid transparent;
color: #fff;
text-transform: uppercase;
font: 12px sans-serif;
text-decoration: none;
font-weight: 700;
}
.breadcrumbs .breadcrumb .active:before,
.breadcrumbs .breadcrumb:hover:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #3f51b5;
position: absolute;
top: 50%;
margin-top: -20px;
margin-left: 1px;
left: 100%;
z-index: 4;
}
.breadcrumbs .breadcrumb.active:after,
.breadcrumbs .breadcrumb:hover:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #3f51b5;
position: absolute;
top: 50%;
margin-top: -20px;
left: 100%;
z-index: 4;
}
<div class="breadcrumbs">
Search
Meet
Discuss
Manage
</div>
Here is the Code
.breadcrumb li{
display:inline-block;
padding:10px 15px;
position: relative;
border: 1px solid #ccc;
margin-left:-4px;
background: #eee;
}
.breadcrumb li:first-child{
background: #054EA3;
}
.breadcrumb li a{
padding-left: 15px;
color:#888;
text-decoration:none;
}
.breadcrumb li:first-child a{
color:#fff;
}
.breadcrumb li:after, .breadcrumb li:before {
left: 100%;
top: 50%;
border: 2px solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.breadcrumb li:after {
border-color: rgba(136, 183, 213, 0);
border-left-color: #eee;
border-width: 20px;
margin-top: -20px;
z-index:99999;
}
.breadcrumb li:first-child:after {
border-left-color: #054EA3;
}
.breadcrumb li:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: #ccc;
border-width: 21px;
margin-top: -21px;
z-index:99999;
}
<ul class="breadcrumb">
<li>SEARCH</li>
<li>MEET</li>
<li>DISCUSS</li>
<li>MANAGE</li>
</ul>
I'm looking to achieve this with CSS:
and this is what I've got:
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
margin: 0;
padding: 0;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
border: 1px solid #c00;
color: black;
text-decoration: none;
padding: 10px 0 10px 55px;
background: #fff;
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 #fff;
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 red;
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 a:hover {
background: hsla(34, 85%, 25%, 1);
}
.breadcrumb li a:hover:after {
border-left-color: hsla(34, 85%, 25%, 1) !important;
}
.breadcrumb li:last-child a {
border-right: 1px solid red;
}
.breadcrumb li:last-child a:before {
border-left: 0 solid transparent;
}
<ul class="breadcrumb">
<li>Home</li>
<li>Vehicles</li>
</ul>
Issues:
Can't get the right side borders to show correctly
Can't get the right border of last element to be normal (not a chevron)
Can't get hover state right because of right side borders.
Here's is my working jsFiddle
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
margin: 0;
padding: 0;
}
.breadcrumb li {
float: left;
position: relative;
background: #fff;
margin: 0 5px;
}
.breadcrumb li a {
border: 1px solid #0976a1;
color: #0976a1;
text-decoration: none;
padding: 10px 10px 10px 32px;
position: relative;
display: block;
z-index: 99;
font-weight: bold;
}
.breadcrumb li:first-child a {
padding-left: 10px;
border-right: none;
}
.breadcrumb li:last-child a {
border-left: none;
}
.breadcrumb li:before, .breadcrumb li:after{
content: " ";
display: block;
width: 33px;
height: 29px;
border-top: 5px solid transparent;
border-bottom: 1px solid #0976a1;
border-right: 1px solid #0976a1;
position: absolute;
top: 4px;
z-index: -1;
background: #fff;
transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
}
.breadcrumb li:before {
left: 87%;
}
.breadcrumb li:after {
left: 81%;
}
.breadcrumb li:first-child:before, .breadcrumb li:first-child:after{ z-index: 1; }
.breadcrumb li:first-child:after{ left: 73%; }
.breadcrumb li:last-child:before, .breadcrumb li:last-child:after{
display: none;
}
.breadcrumb li:first-child:hover:after, .breadcrumb li:hover{ background: #0976a1; }
.breadcrumb li:hover a{ border-color: transparent; }
.breadcrumb li:hover a{ color: #fff; }
<ul class="breadcrumb">
<li>Home</li>
<li>Vehicles</li>
</ul>
I hope this will help you :)
I think this code is helpful.
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
margin: 0;
padding: 0;
}
.breadcrumb li {
float: left;
margin-right: 10px;
}
.breadcrumb li:first-child {
z-index: 9;
position:relative;
}
.breadcrumb li a {
border: 1px solid #006A9C;
color: black;
text-decoration: none;
padding: 10px 10px 10px 10px;
background: #fff;
position: relative;
display: block;
float: left;
}
.breadcrumb li:first-child a:after {
border-color:#fff;
border-style: solid;
border-width: 15px;
bottom: -30px;
box-shadow: 0 0 0 0 #c00, -1px 1px 0 1px #006A9C;
content: "";
height: 0;
position: absolute;
right: -29px;
transform: rotate(-135deg);
transform-origin: 0 0 0;
width: 0;
z-index: -1;
}
.breadcrumb li:first-child a {
border-right: 0;
}
.breadcrumb li:last-child a {
border-left: 0;
}
.breadcrumb li:last-child a:after{
display:none;
}
.breadcrumb li:last-child a:before{
border-color:#fff;
border-style: solid;
border-width: 15px;
bottom: -30px;
box-shadow: 0 0 0 0 #006A9C, -1px 1px 0 1px #006A9C;
content: "";
height: 0;
position: absolute;
left: -1px;
transform: rotate(-135deg);
transform-origin: 0 0 0;
width: 0;
}
.breadcrumb li:last-child a {
padding-left: 28px;
}
.breadcrumb li a:hover {
background: #006A9C;
color: #fff;
}
.breadcrumb li a:first-child:hover::after {
border-color:#006A9C;
}
<ul class="breadcrumb">
<li>Home</li>
<li>Vehicles</li>
</ul>
*{
margin: 0;
padding: 0;
}
.container{
margin: 20px;
display: flex;
flex-direction: row;
border: 1px solid skyblue;
width: 200px;
overflow: hidden;
}
.left,.right{
display: inline-block;
//border: 1px solid black;
line-height: 50px;
width: 100px;
height: 100%;
position: relative;
}
.right{
text-align: center;
}
p:hover{
background-color: skyblue;
color: white;
}
.left::after{
content:'';
position: absolute;
left: 70px;
top: 3px;
display: inline-block;
width: 45px;
height: 45px;
z-index: 2;
background:white;
transform:rotate(-45deg);
border-right: 1px solid skyblue;
border-bottom: 1px solid skyblue;
}
.left:hover::after{
background-color: skyblue;
}
<div class="container">
<p class="left">LEFT</p>
<p class="right">RIGHT</p>
</div>
It is doing my best.
I hope it will be useful for you.
How this one can achieved in CSS. I googled out but i didn't find any solution.
Try this:
HTML
<nav class="nav">
<ul>
<li>1. Account Info</li>
<li>2. Verification</li>
<li>3. Enjoy</li>
</ul>
</nav>
StyleSheet
.nav ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
width: 100%;
}
.nav ul li {
float: left;
margin: 0 .2em 0 1em;
}
.nav ul a {
background: red;
padding: .3em 1em;
float: left;
text-decoration: none;
color: #fff;
position: relative;
}
.nav ul li:first-child a:before {
content: normal;
}
.nav ul li:last-child a:after {
content: normal;
}
.nav ul a:before {
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: red rgba(0, 0, 0, 0);
left: -1em;
margin-left: 1px;
}
.nav ul a:after {
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid rgba(0, 0, 0, 0);
border-bottom: 1.5em solid rgba(0, 0, 0, 0);
border-left: 1em solid red;
right: -1em;
margin-right: 1px;
}
Here is the Demo
Try:
HTML:
<div class="arrow">
<p>1. Acount Info</p>
</div>
<div class="arrow2">
<p>2. Verification</p>
</div>
<div class="arrow3">
<p>3. Enjoy</p>
</div>
CSS:
.arrow {
width: 200px;
height: 33px;
background-color: red;
border: 1px solid red;
position: relative;
display:inline-block;
}
.arrow:after {
content:'';
position: absolute;
top: 0px;
left: 201px;
width: 0;
height: 0;
border: 17px solid transparent;
border-left: 12px solid red;
}
.arrow2 {
width: 200px;
height: 33px;
background-color: red;
border: 1px solid red;
position: relative;
display: inline-block;
margin-left: 8px;
}
.arrow2:after {
content:'';
position: absolute;
top: 0px;
left: 201px;
width: 0;
height: 0;
border: 17px solid transparent;
border-left: 12px solid red;
}
.arrow2:before {
content:'';
position: absolute;
top: 0px;
left: -1px;
width: 0;
height: 0;
border: 17px solid transparent;
border-left: 12px solid white;
}
.arrow3 {
width: 200px;
height: 33px;
background-color: red;
border: 1px solid red;
position: relative;
display: inline-block;
margin-left: 8px;
}
.arrow3:before {
content:'';
position: absolute;
top: 0px;
left: -1px;
width: 0;
height: 0;
border: 17px solid transparent;
border-left: 12px solid white;
}
p {
color:white;
text-align: center;
margin-top: 6px;
}
And the DEMO
Here's my attempt: http://codepen.io/anon/pen/xDeCd/
This example works well even if the user changes his font-size or triggers a page zoom. List-items should not break in several lines if the browser is resized.
Screenshot
Markup
<ol>
<li>1. Account info</li>
<li>2. Verification</li>
<li>3. Enjoy</li>
</ol>
(add links if/where necessary, I've just supposed they are not links but simply information labels about the required steps during a process).
Relevant CSS
ol {
white-space: nowrap;
}
li:after, li:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
top: 0;
width: 1em;
height: 100%;
}
li {
display: inline-block;
position: relative;
height: 3em;
padding: 0 1em;
margin-right: 3em;
background: #d12420;
color: #f0f0f0;
font: 1em/3em Arial;
}
li + li { margin-left: -1.8em; }
li:not(:last-child):after {
left: 100%;
content: "";
border-left: 1em solid #d12420;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
}
li + li:before {
content: "";
right: 100%;
border-left: 1em solid #transparent;
border-top: 1.5em solid #d12420;
border-bottom: 1.5em solid #d12420;
}
li:nth-child(1) { z-index: 3; }
li:nth-child(2) { z-index: 2; }
li:nth-child(3) { z-index: 1; }
Here is some code, it may be useful for youDEMO
<div class="breadcrumb flat">
<a class="active" href="#">1.Account Verification</a>
2.Verification
3.Enjoy
</div>